How to make a smooth scroll, you need to determine where in the link is specified # ebout. and turned over to the section where go to ebout.

<div class="navbar-nav"> <a class="nav-item nav-link active" href="#header">Главная <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#about">О нас</a> <a class="nav-item nav-link" href="#gallery">Галлерея</a> <a class="nav-item nav-link" href="#special">Школа</a> </div>

sections like this

  <section id="about" class="about col-lg-12"> ... </section> <section id="about" class="about col-lg-12"> ... </section> <section id="about" class="about col-lg-12"> ... </section>
  • A lot of duplicate id - bad. The essence of the question is incomprehensible. - yolosora

1 answer 1

Use scrollTop

 $("#button").click(function() { $('html, body').animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); }); 

 $(document).ready(function() { $("#click").click(function() { $('html, body').animate({ scrollTop: $("#about").offset().top }, 2000); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="click">Нажми меня</button> <div style="height: 1000px; width 100px; background-color:#ffc0c0"> Большой блок </div> <br/> <div id="about" style="width 100px; height: 500px; background-color:#9c9cff"> Следующий блок </div>