Bootstrap3 - 滑动以更正所选项目页面上的 ID

Question

我在一个我放在一起的小页面上使用 bootstrap3，并且链接在导航中工作正常。

例如，您在导航栏上单击 'about'，它会将您带到页面上的#about - 但它会立即执行此操作。我希望它 'slide' 到页面的 #about 部分，但不知道如何使用 jquery.

完成此操作

我不确定这是否是内置功能，但如有任何帮助，我们将不胜感激。

我的导航栏看起来像这样：

<nav class="navbar navbar-default navbar-fixed-top">
      <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 class="navbar-brand" href="#"><img src="./images/logos/tsds-sm-logo.png"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#service">Service</a></li>
            <li><a href="#products">Products</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <p id="navbar-phone">Contact Us: 555-555-0555</p>
        </div>
      </div>
    </nav>

例如，我的#about 部分如下所示：

    <a name="about" id="about"></a>
<section id="par-content" data-speed="4" data-type="background" >

  <div class="row featurette">        
    <div class="col-md-7">
    <h2 class="featurette-heading">Lorum Ipsum <span class="text-muted">Lorum Ipsum</span></h2>
      <p class="lead">Lorum Ipsum</p>

      <p><a class="btn btn-primary btn-lg" href="#" role="button">&laquo; Find Out How We Can Help &raquo;</a></p>
    </div>
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Trendy Image" src="images/trendy-image.jpg">
    </div>
  </div>
<a name="service" id="service"></a>     
  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image" src="images/some-trendy-image.jpg">
    </div>
    <div class="col-md-7">
      <h2 class="featurette-heading">Lorum Ipsum</span></h2>
      <p class="lead">Lorum Ipsum</p>


      <p><a class="btn btn-primary btn-lg" href="#" role="button">&laquo; Find Out How We Can Help &raquo;</a></p>

    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-7">
      <h2 class="featurette-heading">Lorum Ipsum <span class="text-muted">Lorum Ipsum</span></h2>
      <p class="lead">Blah blah blah</p>
    </div>
    <div class="col-md-5">
      <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
    </div>
  </div>

</section>

Answer 1

我在网上找到了一些粗略的指南，并利用以下方法让它发挥作用：

   $(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
});

鼓励对这个答案的 rightness/wrongness 提出任何建议。

Bootstrap3 - 滑动以更正所选项目页面上的 ID

Bootstrap3 - Slide to correct ID on page for selected item

html

css

jquery

twitter-bootstrap-3