Question

每次点击“go down”按钮时，我都有以下代码向下滚动浏览器某个预定义的高度。

var scrolled=0;    
$(document).ready(function(){                
    $("#downClick").on("click" ,function(){
      scrolled=scrolled+500;

      $("html, body").animate({
              scrollTop:  scrolled
         });  
    });

});

看起来工作正常，但我意识到当它到达页面底部时，如果我将浏览器的侧面滚动条一直拖到顶部并再次单击按钮，它将一直向下滚动到底部。我需要刷新页面才能使其再次运行。我不知道......

1）如何增强代码，以便无论我在何处拖动滚动条，“向下”按钮的滚动都将保持一致和稳定。

2）当到达页面底部附近（例如.100px）时，它会在按钮上添加一个类，例如“底部”以进行样式设置。

Answer 1

不是存储scrolled的最后一个值，而是简单地计算“body”元素的.scrollTop()值，这将告诉您页面的下移距离，并为该数量添加500。

var scrolled;    
$(document).ready(function(){                
    $("#downClick").on("click" ,function(){
      scrolled= $("body").scrollTop()+500;

      $("html, body").animate({
              scrollTop:  scrolled
         });  
    });

});

要计算我们何时在底部，我们还需要考虑window的高度，如果你的scrollTop值加上窗口高度大于或等于身体的高度那么我们可以推断出你处于最底层：

var documentHeight = $("body").height(),
    windowHeight, scrolled;

$(document).ready(function(){                
    $("#downClick").on("click" ,function(){
      scrolled= $("body").scrollTop() + 500;
      windowHeight = $(window).height();
      $(this).toggleClass("bottom", scrolled + windowHeight >= documentHeight);

      $("html, body").animate({
              scrollTop:  scrolled
         });  
    });

});

请注意，我只计算一次身体大小，但每次只计算窗口大小。我假设虽然用户可能会更改浏览器宽度，但文档本身的大小不会增大/缩小，因为计算高度会产生相关成本。

<强> See JSFiddle

Answer 2

问题1：

试试这个

scrollTop: $("html, body").scrollTop() + 500

它将检查scrollTop值并向其添加500，而不关心您的滚动位置。

jquery向下滚动按钮增强

2 个答案: