JQuery creates smooth Page scrolling (top or bottom)

In this article, I will show you how to create a smooth scrolling effect using jQuery. You can scroll to the top or bottom of your webpage.

How it works
First, load the jquery library before the Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"> </script> jQuery scroll to the bottom:

Link:
<A href = "#" class = "scrollToBottom"> Scroll to bottom </a> jQuery
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
// Scroll page to the bottom
$ ('A. scrollToBottom '). click (function (){
$ ('Html, body,. content'). animate ({scrollTop: $ (document). height ()}, 300 );
Return false;
});
})
</Script>

How it works:
The first line of code is executed before the page is loaded.
$ (Document). ready (function () {execute the action in {} when the connected. scrollToBottom class is clicked

$ (Document). ready (function (){
$ ('A. scrollToBottom '). click (function (){
});
}) In this function, execute this code
$ ('Html, body'). animate ({scrollTop: $ (document). height ()}, 'low ');
Return false; when the Code clicked by a link runs inside the function, scrollTop uses smooth scrolling. The above code will scroll to the bottom of the page and use the window height to determine the bottom height. Using Speed Control for "slow", "medium", and "fast", I used 'slow.
JQuery scroll to the top
First, insert a link to the footer of Your webpage. When the clicked jQuery code is executed. Animation functions. It is very important because it references the links of classes in jQuery.
Link:
<A href = "#" class = "scrollToTop"> Scroll to bottom </a> jQuery
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('A. scrollToTop '). click (function (){
$ ('Html, body'). animate ({scrollTop: 0}, 'low ');
Return false;
});
})
</Script>

How it works:
When the class is loaded on the page. When the scrollToTop link is clicked, jQuery will execute this
$ ('Html, body'). animate ({scrollTop: 0}, 'low ');
Return false ;. the animate () method enables us to create the animation effect of CSS attributes of any number. The scrollTop function is set to 0, which indicates the position of the scroll bar at the top, "slow" refers to the speed at which the animation will run. When you notice this line:
<Code> return false; </code> This prevents events that are triggered by default actions. In our example, it prevents User links.
You can also:
Copy codeThe Code is as follows:
Event. preventDefault ();