jquery: $(window).scrollTop() but no $(window).scrollBottom()
JavascriptJqueryJavascript Problem Overview
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.
I noticed jquery can get current viewport's top position, but how can I get the bottom of the scroll viewport?
So I am asking how to know: $(window).scrollBottom()
Javascript Solutions
Solution 1 - Javascript
var scrollBottom = $(window).scrollTop() + $(window).height();
Solution 2 - Javascript
I would say that a scrollBottom as a direct opposite of scrollTop should be:
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 //
Solution 3 - Javascript
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)
$.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);
Solution 4 - Javascript
var scrollBottom =
$(document).height() - $(window).height() - $(window).scrollTop();
I think it is better to get bottom scroll.
Solution 5 - Javascript
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).
Solution 6 - Javascript
try:
$(window).scrollTop( $('body').height() );
Solution 7 - Javascript
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');
});
Solution 8 - Javascript
// 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;
});
Solution 9 - Javascript
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
Solution 10 - Javascript
For an item in my page :
document.getElementById(elementId).scroll(0,
document.getElementById(elementId).scrollHeight);
function scrollBottum(elementId){
document.getElementById(elementId).scroll(0, document.getElementById(elementId).scrollHeight);
}
<html><div><button onclick="scrollBottum('myCart')">Click me to scroll</button></div>
<div id="myCart" style="height: 50px; overflow-y: scroll;">
<div>1: A First ...</div>
<div>2: B</div>
<div>3: C</div>
<div>4: D</div>
<div>5: E</div>
<div>6: F</div>
<div>7: LAST !!</div>
</div>
</html>
Solution 11 - Javascript
i try that and it work very well
scrollrev(){
let x:any= document.getElementById('chat')
x.scrollTop = -9000;
}
Solution 12 - Javascript
i try that code and it work
// scroll top
scroll(){
let x:any= document.getElementById('chat')
x.scrollTop = 9000;
}
// scroll buttom
scrollrev(){
let x:any= document.getElementById('chat')
x.scrollTop = -9000;
}
Solution 13 - Javascript
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:
document.body.scrollTop = 100000;