Wie blende Scroll zu bestimmten div

Question

Ich habe eine einzelne Webseite erstellt, ich brauche reibungslosen Scrolling-Effekt, wenn Sie auf das Hauptmenü klicken. Ich habe erstellt, aber es springt zu bestimmten Div ohne reibungsloses Scrollen. Wie kann es mit Bootstrap oder einer anderen Methode gemacht werden.

Mein HTML-Code

<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

fügen Sie den folgenden jquery-Code für reibungsloses Scrollen hinzu.

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

Sie einige js hinzufügen könnte (mit jQuery):

fügen Sie ein "scroll-to-Anker" Klasse Ihren Links, etwa so:

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

und folgende js hinzufügen (nicht getestet, sollte aber funktionieren):

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

Sehen, wie Sie bereits jQuery verwenden, eine einfache Lösung ist die folgende Javascript hinzuzufügen:

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