Javascript jquery: $(window).scrollTop() 但没有 $(window).scrollBottom()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4655273/
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: $(window).scrollTop() but no $(window).scrollBottom()
提问by Bin Chen
I want to place an element to the bottom of the page whenever the user scrolls the page. It's like "fixed position" but I can't use "position: fixed" css as many of my clients' browser can't support that.
每当用户滚动页面时，我想将一个元素放置在页面底部。这就像“固定位置”，但我不能使用“位置：固定”css，因为我的许多客户的浏览器不支持。
I noticed jquery can get current viewport's top position, but how can I get the bottom of the scroll viewport?
我注意到 jquery 可以获得当前视口的顶部位置，但是如何获得滚动视口的底部？
So I am asking how to know: $(window).scrollBottom()
所以我问怎么知道：$(window).scrollBottom()
回答by David Tang
var scrollBottom = $(window).scrollTop() + $(window).height();
回答by Alfred
I would say that a scrollBottom as a direct opposite of scrollTop should be:
我会说与 scrollTop 直接相反的 scrollBottom 应该是：
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
Here is a small ugly test that works for me:
这是一个对我有用的小丑测试：
// SCROLLTESTER START //
$('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>').insertAfter('body');
$(window).scroll(function () {
var st = $(window).scrollTop();
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
$('#st').replaceWith('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;">scrollTop: ' + st + '<br>scrollBottom: ' + scrollBottom + '</h1>');
});
// SCROLLTESTER END //
回答by Zephyr
For the future, I've made scrollBottom into a jquery plugin, usable in the same way that scrollTop is (i.e. you can set a number and it will scroll that amount from the bottom of the page and return the number of pixels from the bottom of the page, or, return the number of pixels from the bottom of the page if no number is provided)
对于未来，我已将 scrollBottom 制作成一个 jquery 插件，其使用方式与 scrollTop 相同（即您可以设置一个数字，它将从页面底部滚动该数量并从底部返回像素数的页面，或者，如果没有提供数字，则返回距页面底部的像素数）
$.fn.scrollBottom = function(scroll){
if(typeof scroll === 'number'){
window.scrollTo(0,$(document).height() - $(window).height() - scroll);
return $(document).height() - $(window).height() - scroll;
} else {
return $(document).height() - $(window).height() - $(window).scrollTop();
}
}
//Basic Usage
$(window).scrollBottom(500);
回答by Zephyr
var scrollBottom =
$(document).height() - $(window).height() - $(window).scrollTop();
I think it is better to get bottom scroll.
我认为最好是底部滚动。
回答by snoop_dog
This will scroll to the very top:
这将滚动到最顶部：
$(window).animate({scrollTop: 0});
This will scroll to the very bottom:
这将滚动到最底部：
$(window).animate({scrollTop: $(document).height() + $(window).height()});
.. change window to your desired container id or class if necessary (in quotes).
.. 如有必要，将 window 更改为所需的容器 ID 或类（在引号中）。
回答by SantoshK
Here is the best option scroll to bottom for table grid, it will be scroll to the last row of the table grid :
这是表格网格滚动到底部的最佳选项，它将滚动到表格网格的最后一行：
$('.add-row-btn').click(function () {
var tempheight = $('#PtsGrid > table').height();
$('#PtsGrid').animate({
scrollTop: tempheight
//scrollTop: $(".scroll-bottom").offset().top
}, 'slow');
});
回答by Ghebrehiywet
// Back to bottom button
$(window).scroll(function () {
var scrollBottom = $(this).scrollTop() + $(this).height();
var scrollTop = $(this).scrollTop();
var pageHeight = $('html, body').height();//Fixed
if ($(this).scrollTop() > pageHeight - 700) {
$('.back-to-bottom').fadeOut('slow');
} else {
if ($(this).scrollTop() < 100) {
$('.back-to-bottom').fadeOut('slow');
}
else {
$('.back-to-bottom').fadeIn('slow');
}
}
});
$('.back-to-bottom').click(function () {
var pageHeight = $('html, body').height();//Fixed
$('html, body').animate({ scrollTop: pageHeight }, 1500, 'easeInOutExpo');
return false;
});
回答by user944550
try:
尝试：
$(window).scrollTop( $('body').height() );
回答by gzenakos
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
回答by unplugged
This is a quick hack: just assign the scroll value to a very large number. This will ensure that the page is scrolled to the bottom. Using plain javascript:
这是一个快速的技巧：只需将滚动值分配给一个非常大的数字。这将确保页面滚动到底部。使用普通的javascript：
document.body.scrollTop = 100000;
