jQuery 滚动到页面底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13583180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery scroll to bottom of page
提问by Evanss
Im using the following to scroll to the top of a page when you click a certain link.
当您单击某个链接时，我使用以下内容滚动到页面顶部。
$('.myLinkToTop').click(function () {
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
I want to make another link that scrolls to the bottom of the page. The following is working OK. I think it tries to scroll 1000px down the page, so if the page is shorter then it scrolls faster than it should, and if the page is taller then it wont go all the way to the bottom. How can I replace '1000' with the window height? Thanks
我想制作另一个滚动到页面底部的链接。以下工作正常。我认为它会尝试将页面向下滚动 1000 像素，因此如果页面较短，则滚动速度会比应有的更快，如果页面较高，则不会一直滚动到底部。如何用窗口高度替换“1000”？谢谢
$('.myMenuLink').click(function () {
$('html, body').animate({scrollTop:1000}, 'slow');
return false;
});
I know that this code jumps to the bottom of the page, but it doenst scroll smoothly like I need:
我知道这段代码会跳到页面底部，但它确实像我需要的那样平滑滚动：
$(document).scrollTop($(document).height());
回答by Sridhar Narasimhan
Your requirement to animate and move to bottom of document can be achieved by the code below
您可以通过以下代码实现动画和移动到文档底部的要求
HTML
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
JS
$('.myLinkToTop').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
return false;
});
$('.myMenuLink').click(function () {
$('html, body').animate({
scrollTop:0
}, 'slow');
return false;
});
Refer to this link
参考这个链接
回答by Roko C. Buljan
You need to substract the viewport height from the scrollHeight :
您需要从 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>回答by Hkachhia
Try this code
试试这个代码
$(function () {
$('#scrlBotm').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
},
1500);
return false;
});
$('#scrlTop').click(function () {
$('html, body').animate({
scrollTop: '0px'
},
1500);
return false;
});
});
回答by surfealokesea
For very long html documentsscrollTop:$(document).height() fails, in these cases you can use:
对于很长的 html 文档scrollTop:$(document).height() 失败，在这些情况下，您可以使用：
$('html, body').animate({
scrollTop: $('#endOfPage').offset().top
}, 1000);
at the end of page put a:
在页面末尾放一个：
<div id="endOfPage"> </div>
回答by Vinod Kumar
code jumps to the bottom of the page With smoothly:
代码顺利跳转到页面底部：
$(document).ready(function () {
$('#selector').click(function () { $('html, body').animate({ scrollTop: $(document).height() }, 1000); }); });
$(document).ready(function () {
$('#selector').click(function () { $('html, body').animate({ scrollTop: $(document).height() }, 1000); }); });
With this code easy to scroll page down.
使用此代码可以轻松向下滚动页面。
回答by Mohamad Hamouday
To scroll to the bottom of page try this:
要滚动到页面底部，请尝试以下操作：
$('html, body').animate({
scrollTop: $('html, body').height()
}, 'slow');
