从页面底部滚动到顶部

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

Answer 2

你可以使用这样的东西。它将屏幕设置为页面顶部的动画。

$(document).ready(function() {
    $('.backtotop').click(function(){ // requires a class backtotop in the a element.
        $('html, body').animate({scrollTop:0}, 'slow');
    });
    return false;
});

Answer 3

检查this。转到页面底部，显示按钮。单击它时，它会滚动到页面顶部。

Ant，this是另一个plugin的演示。