如何向下滾動單擊按鈕1次

Question

我想知道如何在單擊按鈕時僅從主頁向下滾動1次，如果已經滾動，則在單擊按鈕時不向下滾動？

我很討厭jQuery，但我不知道該怎么做。 當前使用此代碼，但它始終返回＃what-is-it id，因此我不喜歡這樣：

  $("#scroll").click(function() {
  $('html,body').animate({
    scrollTop: $("#what-is-it").offset().top},
    'slow');
          });

如果您有使用javascript的解決方案，也歡迎您。

只想向下滾動如果用戶在主頁上？ 如果他回到首頁，請再次按下按鈕。

Answer 1

只需對導航欄使用此樣式：

#nav {
    width: 100%;
    background-color: blue;
    position: fixed;
    bottom: 0;
}

jQuery部分的解決方案在此jsfiddle中。

https://jsfiddle.net/Lnq2etu9/5/-我想您正在尋找的是這個。 我剛剛編輯了Sim的代碼以使其適合您。

Answer 2

Yust使用jquery off()取消了您的點擊事件。 此處提供API： http ： //api.jquery.com/off/

因此，像這樣更新您的代碼：

$("#scroll").click(function() {
    $('html,body').animate({
        scrollTop: $("#what-is-it").offset().top},
        'slow');
    });
    //unset click event:
    $(this).off();
});

另一種可能性是使用one() ：

.one（）方法與.on（）相同，不同之處在於處理程序在首次調用后未綁定。

從API中獲取： http ： //api.jquery.com/one/

$("#scroll").one('click', function() {
     $('html,body').animate({
         scrollTop: $("#what-is-it").offset().top},
         'slow');
     });
});

你寫了：

如果已經滾動，則單擊按鈕以不向下滾動？

使用jquery onscroll函數取消設置click函數處理程序：

$(window).scroll(function() {
     $("#scroll").off();
});

...如果用戶滾動，則會取消您的點擊事件。

編輯：

我已經更新了代碼，您在此處和下面的評論中發布了這些代碼：

//your scroll function
function scrollDown() {
    $('html,body').animate({
        scrollTop: $("#nav").offset().top
    },'slow');
}

//set your handler on page load
$("body").on("click", "#scroll", scrollDown);

//scrol event handler
$(window).scroll(function() {
      var navHeight = 300; // custom nav height
      if($(window).scrollTop() > navHeight) {
            $('#nav').addClass('goToTop');
            //finish scroll animation
            $('html,body').finish();
            //set event handler to #scroll with your scroll function
            $("body").off("click", "#scroll", scrollDown);
      } else {
            $('#nav').removeClass('goToTop');
            //unset event handler
            $("body").on("click", "#scroll", scrollDown);
      }
}); 

因此，當導航欄位於頂部時，會將點擊事件設置為按鈕，否則將其刪除。 這里是一個示例示例的鏈接： http : //jsfiddle.net/Lnq2etu9/3/