Magento: Scroll To Top functionality

Scroll To Top functionality in Magento
Open your header.phtml file and write below code..

<a title="Scroll To Top" class="scrollup" href="javascript:void(0);" style="display: none; position:fixed; bottom:50px; text-align:right;">Scroll</a>
<script type="text/javascript">
jQuery(document).scroll(function(){
if (jQuery(this).scrollTop() > 100) {
jQuery('.scrollup').fadeIn();
} else {
jQuery('.scrollup').fadeOut();
}
});
jQuery('.scrollup').click(function(){
jQuery("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
</script>

——— Extra Code ———

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

Note the use of window.onload (when images are loaded…which occupy height) rather than document.ready
To be technically correct, you need to subtract the window’s height, but the above works:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

To scroll to a particular ID, use its .scrollTop(), like this:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

—————————————————————————————————-

The other solutions here don’t actually work for divs with lots of content — it “maxes out” scrolling down to the height of the div (instead of the height of the content of the div). So they’ll work, unless you have more than double the div’s height in content inside of it.

Here is the correct version:

$('#div1').scrollTop($('#div1')[0].scrollHeight);

or jQuery 1.6+ version:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

Or animated:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});