Question

Morning Guys，

好的，所以我使用Bootstrap 3来构建我的网站 - 想要使用锚定标签上的scrollTop平滑滚动来完善它。无法让它为我的生活而工作。

所以这是我的代码：

<script type="text/javascript" src="js/animate.js"></script>


<body>

<div id='imgDiv'>
    <div class="container">

        <center>
            <a href="#imgDiv2"><h2>my link</h2></a>

        </center>
    </div>  
</div>



<a href=""> 
<div id='imgDiv2'></div>
    some content here  
      </div>
    </div>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

这是animate.js

中的脚本

// JavaScript Document

$(document).ready(function() {
      $('a[href^="#"]').click(function() {
          var target = $(this.hash);
          if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
          if (target.length == 0) target = $('html');
          $('html, body').animate({ scrollTop: target.offset().top }, 500);
          return false;
      });
  });

所以它确实锚定到名为imgDiv2的div id但没有使用平滑滚动动画，任何想法？

Answer 1

您需要在jQuery之后包含animate.js，因为animate.js中的jQuery代码需要jQuery核心库才能工作：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/animate.js"></script>

在Bootstrap 3中的scrollTop锚点链接

1 个答案: