Smooth scrolling effect with Jquery when clicking an anchor link

In this snippet we will learn how to create a smooth scrolling effect with Jquery. By this way, when we use the hash tag to move to another element will working smoothly and support all browsers.

Step 1: Add codes below into your Head tag

 


In the codes above, we using jQuery's animate() method to add smooth page scroll, and time to scroll is 1000 milliseconds (1 second).

Step 2: Create scrolling element, in the example below, we have two elements.


Notice: Please pay attention for the id and href attributes in the codes above.

Step 3: Add the CSS codes for the HTML elements.

body {
 color:#fff;
 font-size: 16px;
}
a{
 color:#fff;
}
#section1 {
 height: 600px;
 padding:20px;
 background-color: rgb(247, 63, 63);
}
#section2 {
 height: 600px;
 padding:20px;
 background-color: rgb(99, 140, 252);
}


csshtmljavascriptjquery

© 2019 4codev

Created with love by Sil.