0

I have a long webpage, so I thought about introducing table of contents. Now I would like to - instead of just jumping to a new place in the webpage - scroll there smoothly. I saw lots of tutorials of how to navigate to a specific place from the nav bar, but I would like to do it from the normal hyperlinks on the webpage.

In my html so far I have:

<h4>contents</h4>
 <ul>
   <li><a href="#part1">part1</a></li>
   <li><a href="#part2">part2</a></li>
   <li><a href="#part3">part3</a></li>
   <li><a href="#part4">part4</a></li>
   <li><a href="#part5">part5</a></li>
 </ul>

<div class="row" id="part1">
    <h4>lorem ipsum</h4>
    <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>
<div class="row" id="part2">
    <h4>lorem ipsum</h4>
    <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>
<div class="row" id="part3">
    <h4>lorem ipsum</h4>
    <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>
<div class="row" id="part4">
    <h4>lorem ipsum</h4>
    <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>

Is there any native bootstrap way of implementing the smooth scrolling? or maybe is there any js script that I could somehow adjust for myself?

randomuser1
  • 2,733
  • 6
  • 32
  • 68

2 Answers2

0

There is a function for that in jQuery called animate.

$('html, body').animate({
    scrollTop: $("#myId").offset().top
}, 2000);

You can change the duration according to your taste.

Engin
  • 755
  • 7
  • 20
0

There is another question that might help you get exactly what you want, but window.scrollTo() seems like what you are looking for! Here's the question

Community
  • 1
  • 1
Johnathan Ralls
  • 131
  • 1
  • 12
  • Thanks, but how will I know the offset? :) is there a way of just putting the id of a div instead of the offset? – randomuser1 Jun 05 '16 at 16:37