Плавный скролл по обьектам

214

11 мая 2018, 11:49

Как сделать плавный скролл, нужно что бы определял где в ссылке указан #эбаут. и перелистывал на секцию где айди эбаут.

<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>

секции примерно так

    <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>

Answer 1

Используйте 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>