Как сгладить прокрутку до определенного div

Question

Я создал единую веб-страницу, мне нужен гладкий эффект прокрутки при нажатии на главное меню. Я создал, но он прыгает в конкретный div без плавной прокрутки. Как это сделать с помощью бутстрапа или любого другого метода.

Мой HTML код

<header id="menu"> 
<!-- Fixed navbar --> 
<nav class="navbar navbar-default navbar-fixed-top" style="background:#fff; border:none; padding:20px 0px 10px 0px;"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="index.html"><img class="img-responsive" src="images/logo.jpg" /></a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right" style="background:#fc4d3f; margin-top:20px; border-radius:5px;"> 
     <li><a href="#menu">Home</a></li> 
     <li><a href="#activities">About us</a></li> 
     <li><a href="#gallery">Gallery</a></li> 
     <li><a href="#footer">Contact us</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 
</header> 

<section id="activities"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-2"> 
      <center><img src="images/icons/1.jpg"></center> 
      <h4 class="icon-title">Target Skillsets</h4> 
     </div> 
     <div class="col-md-2"> 
      <center><img src="images/icons/2.jpg"></center> 
      <h4 class="icon-title">Extra Activities</h4> 
     </div> 
     <div class="col-md-2"> 
      <center><img src="images/icons/3.jpg"></center> 
      <h4 class="icon-title">Complete Tracking</h4> 
     </div> 
     <div class="col-md-2"> 
      <center><img src="images/icons/4.jpg"></center> 
      <h4 class="icon-title">Individual Bus</h4> 
     </div> 
     <div class="col-md-2"> 
      <center><img src="images/icons/1.jpg"></center> 
      <h4 class="icon-title">Target Skillsets</h4> 
     </div> 
     <div class="col-md-2"> 
      <center><img src="images/icons/2.jpg"></center> 
      <h4 class="icon-title">Extra Activities</h4> 
     </div> 
    </div> 
</div> 
</section> 

Answer 1

добавьте ниже код jquery для плавной прокрутки.

$(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; 
 
     } 
 
    } 
 
    }); 
 
});

col-md-2{height:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header id="menu"> 
 
<!-- Fixed navbar --> 
 
<nav class="navbar navbar-default navbar-fixed-top" style="background:#fff; border:none; padding:20px 0px 10px 0px;"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a href="index.html"><img class="img-responsive" src="images/logo.jpg" /></a> 
 
    </div> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right" style="background:#fc4d3f; margin-top:20px; border-radius:5px;"> 
 
     <li><a href="#menu">Home</a></li> 
 
     <li><a href="#activities">About us</a></li> 
 
     <li><a href="#gallery">Gallery</a></li> 
 
     <li><a href="#footer">Contact us</a></li> 
 
     </ul> 
 
    </div><!--/.nav-collapse --> 
 
    </div> 
 
</nav> 
 
</header> 
 

 
<section id="activities"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-2"> 
 
      <center><img src="images/icons/1.jpg"></center> 
 
      <h4 class="icon-title">Target Skillsets</h4> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <center><img src="images/icons/2.jpg"></center> 
 
      <h4 class="icon-title">Extra Activities</h4> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <center><img src="images/icons/3.jpg"></center> 
 
      <h4 class="icon-title">Complete Tracking</h4> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <center><img src="images/icons/4.jpg"></center> 
 
      <h4 class="icon-title">Individual Bus</h4> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <center><img src="images/icons/1.jpg"></center> 
 
      <h4 class="icon-title">Target Skillsets</h4> 
 
     </div> 
 
     <div class="col-md-2"> 
 
      <center><img src="images/icons/2.jpg"></center> 
 
      <h4 class="icon-title">Extra Activities</h4> 
 
     </div> 
 
    </div> 
 
</div> 
 
</section>

Answer 2

вы могли бы добавить некоторые JS (с JQuery):

добавить "прокручивать к якорю" класс к вашим ссылкам, например, так:

<a class="scroll-to-anchor" href="#footer">Contact us</a> 

и добавить следующие js (не проверено, но должно работать):

$(document).ready(function() { 
    $('.scroll-to-anchor').on('click', scrollToAnchor); 
} 


scrollToAnchor = function() { 
event.preventDefault(); 

var anchor = $(this).attr('href'), 
    offset = $(anchor).offset(); 

    $('html, body').animate({ 
    'scrollTop': offset.top + 'px' 
    }, 500); 


    return false; 
}; 

Answer 3

Видя, как вы уже используете JQuery, простое решение, чтобы добавить следующие Javascript:

$(document).ready(function() { 
    $("a").on('click', function (event) { 
    if (this.hash !== "") { 
     event.preventDefault(); 
     var hash = this.hash; 
     $('html, body').animate({ scrollTop: $(hash).offset().top }, 800); 
     /* This last value is the scroll animation speed in milliseconds */ 
    } 
    }); 
});