Question

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

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

我想创建另一个滚动到页面底部的链接。以下工作正常。我认为它试图在页面上滚动1000px，所以如果页面较短，那么它滚动得比它应该更快，如果页面更高，那么它不会一直到底部。如何用窗户高度替换“1000”？谢谢

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

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

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

Answer 1

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

<强> 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/

Answer 2

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

Answer 3

试试此代码

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

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

Answer 4

对于很长的html文档 scrollTop：$（document）.height（）失败，在这些情况下，您可以使用：

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

在页面末尾放了一个：

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

Answer 5

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

$（document）.ready（function（）{

$（'＃selector'）。click（function（）{                   $（'html，body'）。animate（{                       scrollTop：$（document）.height（）                   }，1000）; }）; }）;

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

Answer 6

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

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

jQuery滚动到页面底部

6 个答案: