Quick Reach
jQuery scroll to top
In this tutorial we will show you how to allow users scroll to top by clicking a link using jquery. This might be required for long content pages in your website. jQuery also provides scroll method, however to make scroll smooth we will use jquery animate method for our jquery scroll to top example.
jquery scroll top example
In following example jQuery animate() method is used to scroll to top as “Move Top” link is clicked. The animate method allows to specify speed of scroll as well. Example below uses test text just to ensure scroll bars are there. If you are testing it at local system, ensure to fill appropriate text so scroll bars are appeared.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#movetop”).click(function() {
$(“html, body”).animate({ scrollTop: 0 }, 2000);
});
});
</script>
</head>
<body>
<p>Text to bring scroll bars! Text to bring scroll bars! Text to bring scroll bars! Text to bring scroll bars! <br /><br />
Text to bring scroll bars! Text to bring scroll bars! Text to bring scroll bars! Text to bring scroll bars! <br /><br />
</p>
<a href=“#top” id=“movetop”>Move top</a>
</body>
</html>
|
Leave A Comment?