javascript code that scrolls to top when a button is clicked

Question

If you click on the navigation links on Hardly Code's website the browser scrolls to another section of the page.

Can anyone point me to some good reading materials for recreating this effect? I am using jquery, and want the animation to be as smooth as is it on hardlycode.com

Answer 1

Use the ScrollTo jQuery plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html - http://plugins.jquery.com/project/ScrollTo

Answer 2

The command is

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

Or, if the link has class scrolltop_btn

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

as a catch effect, in case javascript is disabled, you should always include the standard HTML anchors too.

If you want to change the duration, you can change 'slow' to the number of milliseconds you want the effect to last.

Answer 3

Here's a blog post on doing it with jQuery: Improved Animated Scrolling Script for Same-Page Links

You can do just scrolling to top, but that method lets you point it to any section of the page exactly the same as if you were using #anchors. It's a great example of progressive enhancement, since the fancy Javascript effect is in addition to an already completely functional no-Javascript system.

Answer 4

Here a good one:

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Try the demo first:

http://demos.flesler.com/jquery/scrollTo/

Good luck!

Answer 5

A very simple one which requires no in-page javascript (it simply finds all links which contain an anchor and makes them scroll instead): http://www.kryogenix.org/code/browser/smoothscroll/