93

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()

Bin Chen
  • 61,507
  • 53
  • 142
  • 183

13 Answers13

163
var scrollBottom = $(window).scrollTop() + $(window).height();
David Tang
  • 92,262
  • 30
  • 167
  • 149
  • 20
    you'd think if its as simple as this, that it could be included in the core framework as .scrollBottom(). Strange.. – Curtis Jan 11 '11 at 09:04
  • 40
    scroll `Top` is # of vertical pixels from document `Top` to visible window `Top`. As an exact opposite to scroll `Top`, scroll `Bottom` should measure # of vertical pixels from document `Bottom` to the visible window `Bottom` (i.e. Alfred's answer below). What *this* gives is the # of vertical pixel from document `_top_` to the visible window `Bottom`. It is useful for sure, though can't call it the opposite to ScrollBottom (I know this is a marked answer but for future readers like myself) – DeepSpace101 Feb 14 '13 at 20:58
  • 1
    This solution won't work if the distance from the top can vary. For example, if I have a
    that has to be a certain distance from the bottom of the page and the page has expandable/collapsible items, it's going to change the body height and therefore the distance from the bottom.
     – crash springfield Apr 28 '17 at 19:10
  • @crashspringfield Actually that's a different question. This question is about placing things near the bottom of the viewport not the bottom of the page. – iPherian May 06 '17 at 00:45
  • @Curtis this is because this solution is super case specific and won't work in a variety of situations. Especially including nested divs with their own scroll areas etc. – mesqueeb Dec 02 '22 at 10:22
94

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 //
var showerEl = $('<h1 id="st" style="position: fixed; right: 25px; bottom: 25px;"></h1>')
showerEl.insertAfter('body');

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  var scrollBottom = $(document).height() - $(window).height() - scrollTop;

  showerEl.html('scrollTop: ' + scrollTop + '<br>scrollBottom: ' + scrollBottom);
});
// SCROLLTESTER END //
PoolloverNathan
  • 148
  • 2
  • 11
Alfred
  • 7,071
  • 4
  • 27
  • 35
10

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);
Zephyr
  • 167
  • 1
  • 8
4
var scrollBottom =
    $(document).height() - $(window).height() - $(window).scrollTop();

I think it is better to get bottom scroll.

pb2q
  • 58,613
  • 19
  • 146
  • 147
3

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).

snoop_dog
  • 51
  • 6
  • 1
    How to animate to the bottom of a fixed height div with `overflow-y: auto` so that it actually scrolls to the bottom of the text (which extends beyond the height of the div)? – user1063287 Jul 30 '20 at 05:40
  • 1
    Update to my question in case it helps anyone else: I think the property to use might be `scrollHeight` - see: https://stackoverflow.com/q/7381817 – user1063287 Jul 30 '20 at 06:19
1

try:

 $(window).scrollTop( $('body').height() );
user944550
  • 125
  • 1
  • 6
0

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');
 });
Dovydas Šopa
  • 2,282
  • 8
  • 26
  • 34
SantoshK
  • 1,789
  • 16
  • 24
0
// 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;
});
Ghebrehiywet
  • 884
  • 3
  • 12
  • 20
0
var scrolltobottom = document.documentElement.scrollHeight - $(this).outerHeight() - $(this).scrollTop();
gzenakos
  • 1
  • 1
0

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>
SEYED BABAK ASHRAFI
  • 4,093
  • 4
  • 22
  • 32
tflorian
  • 1
0

i try that and it work very well

scrollrev(){
    let x:any= document.getElementById('chat')
    x.scrollTop = -9000;
  }
user18159846
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 09 '22 at 11:31
0

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;
  }
racem triki
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 09 '22 at 11:29
-3

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;
unplugged
  • 851
  • 7
  • 12
  • This won't work on pages longer than 100000 pixel. That might seem to be quite an edge case, however in cases like endless scrolling pages it is not that improbable. If you really want a solution without jquery, [this](https://stackoverflow.com/a/11715670/1406321) answer might be a better option. – lucash Jun 20 '17 at 20:31
  • ya, the point is to use a number as large as possible say 999999999999999999999999999999. – unplugged Jun 21 '17 at 13:06