How to go to part of website by sliding rather than directly?

Question

I am trying to make a website using bootstrap and I want to go to my div's in my homepage from the navbar itself.I have passed the id of my div to the anchor tag in my navbar but the problem is it goes directly to that part,but I want to slide to that part as done in this website when you click on the navbar elements it slides rather than directly going

How to do this?

Css transitions or use JavaScript animations! What does your code look like? — Spade, Jul 04 '15 at 18:10
Possible duplicate - http://stackoverflow.com/questions/14804941/how-to-add-smooth-scrolling-to-bootstraps-scroll-spy-function — Paulie_D, Jul 04 '15 at 18:25
duplicate is exactly how I was going to answer, dear me, it's hard to get a high scoring answer here, I wish I could get 127 upvotes! — Toni Leigh, Jul 04 '15 at 18:29
Take heart Toni Leigh. Those 127 votes are over a 2 year span. They kinda trickle in. People search for an issue, then find your answer and vote it up. Write good answers and you'll get votes over time. I still get +10's from answers I wrote years ago... of course, you'll also lose points periodically when user accounts are deleted. — Gary Hayes, Jul 04 '15 at 18:36

score 1 · Accepted Answer · answered Jul 04 '15 at 18:29

One way is to use the existing bootstrap template, which has Fixed Navigation Bar at the top and smooth sliding and page highlighting effect. Check it out here : http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/

Other way is to add one common class to all the anchors e.g. say "page-scroll", and bind click event on that, which looks like this :

JQUERY :

$(document).on("click", "a.page-scroll", function(e){
    e.preventDefault(); // To prevent it from directly going to the section.
    $("html, body").animate({
         scrollTop: $($(this).attr("href")).offset().top}, // It store the section id 
    1000);
});

HTML (anchor link snippet) :

<a href="#section1" class="page-scroll">Section 1</a>
.....
.....
.....
<div id="section1">
....
.... 
....
</div>

Nopes it will not work for external links. It will work only when you have link which refer to the sections on the same page. — Prateek, Jul 04 '15 at 18:48

How to go to part of website by sliding rather than directly?

1 Answers1