This jQuery codehelps you add smooth SCROLL animation when you click to Go To link in your web page. I am using .animate jQuery function in following code.
In this tutorial you will learn how you can create an animated scroll to top or any element with jQuery.
Create Button or Link
First we need to create HTML button/link.
|
1 |
<a href="javascript:void(0);" class="goToLink">Scroll To Middle Section</a> |
JQuery Code
Write jQuery code to go to Target section of same web page.
|
1 2 3 4 5 6 7 |
jQuery(document).ready(function(){ jQuery(document).on("click","a.goToLink",function(){ jQuery('html, body').animate({ scrollTop: jQuery(".targetElement").offset().top, }, 1000); }); }); |
In above code . medddleElement is class name of Target element where you want to go on web page.
I am software developer by profession and doing work and research in field of Computer programmings like PHP, WordPress, Magento, jQuery, Google APIs and many more web languages. Apart from this I write blogs on programming languages like PHP, Javascript, WordPress etc. I am also individual and independent Freelancer so you can hire me for your web work.