Jeseem Shajahan Jeseem Shajahan - 3 months ago 10
HTML Question

How to smooth scroll to particular div

I created a single web page, I need smooth scrolling effect when clicking on main menu. I have created but it is jumping to particular div without smooth scrolling. How can it be done with bootstrap or any other method.

My 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

add the below jquery code for smooth scrolling.

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