jquery - jQuery滚动到页面底部

Question

当您单击某个链接时，我使用以下内容滚动到页面顶部。

$('.myLinkToTop').click(function () {
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
});

我想创建另一个滚动到页面底部的链接。以下工作正常。我认为它会尝试将页面向下滚动 1000 像素，因此如果页面较短，则它的滚动速度会比应有的快，如果页面较高，则它不会一直滚动到底部。如何用窗口高度替换“1000”？谢谢

$('.myMenuLink').click(function () {
    $('html, body').animate({scrollTop:1000}, 'slow');
    return false;
});

我知道这段代码会跳转到页面底部，但它不会像我需要的那样平滑滚动：

$(document).scrollTop($(document).height());

score 36 · Accepted Answer

您可以通过以下代码实现动画和移动到文档底部的要求

HTML

<html>
<head>
</head>
<body>
    <div style="height:1500px">
        <button class="myLinkToTop" id="but1" >1</button>
    </div>
        <button class="myMenuLink" id="but1" >2</button>
</body>
</html>

JS

$('.myLinkToTop').click(function () {
    $('html, body').animate({
        scrollTop: $(document).height()
    }, 'slow');
    return false;
});

$('.myMenuLink').click(function () {
    $('html, body').animate({
        scrollTop:0
    }, 'slow');
    return false;
});

参考这个链接

http://jsfiddle.net/q6Wsp/6/

score 11 · Accepted Answer

您需要从 scrollHeight 中减去视口高度：

$('#goToBottom').click(function(){

  var WH = $(window).height();  
  var SH = $('body').prop("scrollHeight");
  $('html, body').stop().animate({scrollTop: SH-WH}, 1000);

});

body{height:2000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="goToBottom">GO TO BOTTOM</button>

score 4 · Accepted Answer

试试这个代码

$(function () {
     $('#scrlBotm').click(function () {
         $('html, body').animate({
             scrollTop: $(document).height()
         },
         1500);
         return false;
     });

     $('#scrlTop').click(function () {
         $('html, body').animate({
             scrollTop: '0px'
         },
         1500);
         return false;
     });
 });

score 4 · Accepted Answer

对于很长的 html 文档scrollTop:$(document).height() 失败，在这些情况下你可以使用：

$('html, body').animate({
    scrollTop: $('#endOfPage').offset().top
}, 1000);

在页面末尾放一个：

<div id="endOfPage">&nbsp;</div>

score 2 · Accepted Answer

代码顺利跳转到页面底部：

$(文档).ready(函数 () {

$('#selector').click(function () { $('html, body').animate({ scrollTop: $(document).height() }, 1000); }); });

使用此代码可以轻松向下滚动页面。

score 0 · Accepted Answer

要滚动到页面底部，请尝试以下操作：

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

jquery - jQuery滚动到页面底部

6 回答 6

Related

Reference