Opposite of "scrollTop" in jQuery

Question

jQuery has a function called scrollTop which can be used to find the number of pixels hidden above the current page view.

I'm not really sure why, but there is no scrollBottom function which returns the number of pixels below the current page view.

Is there a jQuery plugin which adds this functionality? Or is it going to require some elaborate math with the window/document height and the scrollTop value?

Answer 1

You could make a pretty simple plugin for this:

$.fn.scrollBottom = function() { 
  return $(document).height() - this.scrollTop() - this.height(); 
};

Then call it on whatever element you wanted, for example:

$(window).scrollBottom();  //how many pixels below current view
$("#elem").scrollBottom(); //how many pixels below element

Answer 2

If you want to Scroll Down (Opposite of “scrollTop”), try to use the vertical position on the argument. Like this:

$(document).ready(function(){
    $("button").click(function(){
                           //position on pixeles
        $("body").scrollTop(1300);
    });
});

The top of the body, will be: $("body").scrollTop(0);

Answer 3

Perhaps this will help how to tell jquery to scroll to bottom, because there is really no opposite function. Same is the problem with scrollLeft - there is no scrollRight

Answer 4

function scrollBottom()
{
    return $( window ).scrollTop() + $( window ).height();
}

// example usage
$( '#footer' ).css( 'top', scrollBottom() - $( '#footer' ).height() );

Answer 5

As scrollTop's default behaviour scrolls to 0 when passing a negative value, I did this function that handles scrollTop and simulate a "scrollDown".

If anchor_pos is negative (so it's above my current scroll position), I subtract its value from current scroll position (as it has a negative value, I'm using + sign)

function jumpToAnchor(scrollable_div_selector, anchor_selector)
{
    anchor_pos = $(anchor_selector).position().top;

    //check if negative number
    if (anchor_pos < 0)
    {
        anchor_pos = $(scrollable_div_selector).scrollTop() + anchor_pos; //anchor_pos is negative, so i'm substracting it
    }

    $(scrollable_div_selector).scrollTop(anchor_pos);
}

Answer 6

This is how I have calculated the distance from the bottom of the element to the bottom of the document:

$(document).height() - ($('#element').offset().top + $('#element').height());

Answer 7

You could try scrollTo plugin and do something like:

$.scrollTo( document.height )

Answer 8

try this:

return this[0].scrollHeight - this.scrollTop() - this.height();