Scroll to the top of a webpage with jQuery
The Javascript
First In Head Put This Code
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
The following Javascript will change all <a href="#top"> links to scroll to the top instead of the instant jump that normally happens when the link is clicked.
1 | $(document).ready(function() { |
3 | $('a[href=#top]').click(function(){ |
4 | $('html, body').animate({scrollTop:0}, 'slow'); |
Note the "return false;" line. This is required otherwise the default action will be done and the instant scroll will happen instead of the nice animated scrolling effect.
The position the document is scrolled to can be different by changing the scrollTop value, the speed by changing the 'slow' value and what appears in the href by chaging the #href value.
Note that an <a name="top"></a> anchor should still be present in the page for browsers that do not have Javascript on or support jQuery.
The HTML
3 | <a href="#top">Back to top</a> |
The <a name="top"> does not have to be present, but see the note above about supporting browsers without Javascript on etc.
0 comments:
Post a Comment