This tutorial explains how to scroll HTML page to given anchor tag using jQuery. This section shows how to create a smooth page scrolling effect to scroll to the top or bottom of web page using jQuery. We will see two links in the following example. First link is called Go to Bottom at the top of the page and another link called Go to Top at the bottom of the page. Both links will allow us to scroll either the top or bottom of the web page.
JQuery Scroll Page Example
<!doctype html>
<head>
<title>JQuery Page Scrolling</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>Using JQuery to Create Page Scrolling</h2>
<style>
div
{
color:red;
background-color:#fcc;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("a.scrollToBottom").click(function(){
$("html,body").animate({scrollTop:$(document).height()},300);
return false;
});
$("a.scrollToTop").click(function(){
$("html,body").animate({scrollTop:0},300);
return false;
});
});
</script>
<body>
<div><a href="#mydiv" class="scrollToBottom">Go to Bottom</a></div>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<p>jQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.</p>
<div id="mydiv"><a href="#" class="scrollToTop">Go to Top</a></div>
</body>
</html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“a.scrollToBottom”).click(function()) line defines click function which will occur when a link with the class scrollToBottom is clicked the code inside the function will run, the scroll effect is created using scrollTop function.
- The next line will scroll to the bottom of the page using the height of window to determine the bottom. 300ms represents the speed at which the animation will run at.
- $(“a.scrollToTop”).click(function()) line defines click function when page has loaded and link with the class scrollToTop .
- $(“html,body”).animate({scrollTop:0},300); line defines animate() method which allows to create animation effects on CSS properties , the scrollTop function is set to 0 which represents the scroll bar being at the very top position and 300ms represents the speed at which the animation will run at.
JQuery Scroll Page Example Demo
When you run the above example, you would get the following output:
JQuery ajaxError Event Example