Smooth page scroll to an anchor link on the same page using Jquery

Share the love!
Smooth page scroll to an anchor link on the same page using Jquery

Hello friends and dear readers, i am back again with a new post actually i was very busy last days and today i got a holiday of Christmas so i am here with you, Today i have a snippet which is madeup using Jquery which will allow's you to make smooth page scroll to an anchor link on the same page. Well you have noticed that some links are used to navigate on same page well they are mostly used to navigate to different parts like you have noticed in some Portfolio or one page templates the navigation links scroll you to another section on same page smoothly that is anchor linking the scroll was smooth because of any Jquery plugin or javascript plugin without that it will work but not smoothly it will jump directly something like for example if you want to navigate to your about section on your page so just an id to you section div like <div id="about">About us</div> and for a link to it you will place an anchor link like <a href="#about">Click me to Go to About Section</a> now when you click on that link you will be directly jumped to that section but not smoothly. For sooth scroll you dont need to do anything in your markup you just have to include the blow script in your page. There are many Jquery plugins but this is a best snippet which i use and recommend you to use it.
so here is it have a look-

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

All done!

So that was how you can make smooth scroll on anchor links and made your webpage more beautiful. If you have any problem regarding this please leave a comment! and I wish the warmth of Christmas brings peace to your home. May you find happiness, love and friendship right beside you and wherever you may go. Merry Christmas to you and to your family.

Refrence URL

Comment with-

Disqus Blogger Google Facebook

0 comments:

Post a Comment

Comments :