javascript - 从页面底部滚动到顶部

Question

我想知道是否在线有任何 jquery 插件可以帮助我在底部滚动页面。

我的意思是，当我将页面滚动到底部时，我想要一个出现的按钮并单击它我可以返回到页面顶部

有什么建议吗？

Answer 1

How to tell when you're at the bottom of the page :

if (  document.documentElement.clientHeight + 
      $(document).scrollTop() >= document.body.offsetHeight ) { 
    ... 
}

滚动到页面顶部的方法如下:

$('html, body').animate({scrollTop:0}, 'slow');

以下是当您点击页面底部时如何将这些组合起来并淡入淡入以滚动到页面顶部的方法(链接只有在您单击它时才会重置，因为这对我来说更有意义) .

这利用了 .animate() 。在 4 个可能的参数中，我使用了 3 个:属性、持续时间和回调。

jsFiddle example

$(function() {
    $(window).scroll(function() {
        var totalHeight, currentScroll, visibleHeight;        
          // How far we've scrolled
        currentScroll = $(document).scrollTop();
          // Height of page
        totalHeight = document.body.offsetHeight;
          // Height visible
        visibleHeight = document.documentElement.clientHeight;
          // If visible + scrolled is greater or equal to total
          //   we're at the bottom
        if (visibleHeight + currentScroll >= totalHeight) {
              // Add to top link if it's not there
            if ($("#toTop").length === 0) {
                var toTop = $("<a>");
                toTop.attr("id", "toTop");
                toTop.attr("href", "#");
                toTop.css("display", "none");
                toTop.html("Scroll to Top of Page");
                  // Bind scroll to top of page functionality
                toTop.click(function() {
                      // Use animate w properties, duration and a callback
                    $('html, body').animate({scrollTop:0}, 'slow', function() {
                        $("#toTop").remove();
                    });
                    return false;
                });
                $("body").append(toTop);
                $("#toTop").fadeIn(3000);
            }
        }
    });
});