Scroll back to top button animation

Creating a Simple Scroll-To-Top Animation ("Back to Top" Button)

#scrolling
#javascript
#jquery

By using the animate and scrollTop jQuery functions you don't need a plugin .

// Back to top $('a.top').click(function () { $(document.body).animate({scrollTop: 0}, 800); return false; });<!-- Create an anchor tag --> <a class="top" href="#">Back to top</a>

Changing the scrollTop value changes where you want the scrollbar to land. All you're doing is animating the body of the document throughout the course of 800ms until it scrolls all the way to the top of the document.

#scrolling
#javascript
#jquery

Written by Matt Smith

Say Thanks
Respond

Related protips

How to determine if a scrollable element has been scrolled to the bottom

691
2

How to get natural/inverse scrolling in Windows 7

41.67K
1

IE Fix for "jumpy" fixed bacground

38.85K
9

1 Response
Add your response

This jQuery worked for me:

$( document ).ready(function() {

$('a.returnTopAction').click(function() { $('html, body').animate({scrollTop: '0'}, 700); });

});

over 1 year ago ·