[JQUERY] scroll from the bottom of the page to the top

Question

hi all guys,

i was wondering if is online any jquery plugin that help me to scroll page when i'm at bottom of this.

i mean,when i scroll my page to bottom side ,i would like a button that appears and clicking it i can return to the top of page

any suggestions?

really thanks ;)

Answer 1

You can use something like this. It animates the screen to the top of the page.

$(document).ready(function() {
    $('.backtotop').click(function(){ // requires a class backtotop in the a element.
        $('html, body').animate({scrollTop:0}, 'slow');
    });
    return false;
});

Answer 2

Check this out. Go to the bottom of page and the button is shown. When clicking on it, it scrolls to the page top.

Ant, this is a demo for another plugin.

Answer 3

is there any method to calculate where i'm am scrolled to the page?

i thought my problem is only to calculate when i'm at bottom of the page... but not focused in, i mean scrolled in :P hope i'm explaining myself :P

Answer 4

How to tell when you're at the bottom of the page:

if (  document.documentElement.clientHeight + 
      $(document).scrollTop() >= document.body.offsetHeight ) { 
    ... 
}

Here's how to scroll to the top of the page:

$('html, body').animate({scrollTop:0}, 'slow');

Here's how to combine those to and fade a link in to scroll to the top of the page when you hit the bottom of the page (the link only gets reset if you click on it, since that made more sense to me).

This makes use of .animate(). Out of 4 possible arguments, I used 3: properties, duration, and a callback.

jsFiddle example

$(function() {
    $(window).scroll(function() {
        var totalHeight, currentScroll, visibleHeight;        
          // How far we've scrolled
        currentScroll = $(document).scrollTop();
          // Height of page
        totalHeight = document.body.offsetHeight;
          // Height visible
        visibleHeight = document.documentElement.clientHeight;
          // If visible + scrolled is greater or equal to total
          //   we're at the bottom
        if (visibleHeight + currentScroll >= totalHeight) {
              // Add to top link if it's not there
            if ($("#toTop").length === 0) {
                var toTop = $("<a>");
                toTop.attr("id", "toTop");
                toTop.attr("href", "#");
                toTop.css("display", "none");
                toTop.html("Scroll to Top of Page");
                  // Bind scroll to top of page functionality
                toTop.click(function() {
                      // Use animate w properties, duration and a callback
                    $('html, body').animate({scrollTop:0}, 'slow', function() {
                        $("#toTop").remove();
                    });
                    return false;
                });
                $("body").append(toTop);
                $("#toTop").fadeIn(3000);
            }
        }
    });
});