Question

我想知道如何点击按钮只能从主页向下滚动一次，如果已经滚动，那么点击按钮就不要向下滚动？

我对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

您必须使用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();
});

...如果用户滚动，则会取消设置点击事件。

修改

我已更新了代码，您发布了here并在下面的评论中

//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); } });

因此，当您的导航栏粘贴到顶部并将其移除时，这会将您的点击事件设置为按钮。这里有一个示例fidde的链接：http://jsfiddle.net/Lnq2etu9/3/

如何向下滚动单击按钮1次

2 个答案: