jQuery滚动到页面底部

Question

jQuery滚动到页面底部

16

当你点击某个链接时，我使用以下代码将页面滚动到顶部。

$('.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());

- Evanss

你应该使用jQuery缓动插件，并传递参数，如swing、easein或easeout，以实现平滑过渡。 - defau1t

提醒一下，目前被接受的答案实际上是错误/不完整的（请参见评论）。 - Roko C. Buljan

6个回答

11

你需要从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>

- Roko C. Buljan

4

尝试这段代码

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

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

- Hkachhia

4

对于非常长的HTML文档，使用scrollTop: $(document).height() 会失败，在这种情况下，您可以使用以下代码：

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

在页面底部添加一个：

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

- surfealokesea

2

代码可以使页面平滑地跳转到底部：

$(document).ready(function () {

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

使用这段代码可以轻松地向下滚动页面。

- Vinod Kumar

0

尝试使用以下方法滚动到页面底部：

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

- Mohamad Hamouday

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sridhar Narasimhan · 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/