Question

我创建了一个网页，点击主菜单时我需要平滑的滚动效果。我已创建但它跳转到特定的div没有平滑滚动。如何使用bootstrap或任何其他方法完成。

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

你可以添加一些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 2

添加以下jquery代码以实现平滑滚动。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何平滑滚动到特定div

3 个答案: