个人中心
gpt4 book ai didi

javascript - Bootstrap 3 中的 scrollTop anchor 链接

转载 作者：搜寻专家 更新时间：2023-11-01 04:17:02 25 4
gpt4 key购买 nike

早上好，

好的，所以我正在使用 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 但不使用平滑滚动动画，有什么想法吗？

最佳答案

您需要在 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>

关于javascript - Bootstrap 3 中的 scrollTop anchor 链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23559647/

25 4 0
文章推荐： javascript - 如何使用 dojo/store/JsonRest 工作 ArcGIS Rest Service
文章推荐： javascript - 设备上的 React Native dev 构建过期了吗？
文章推荐： ios - Xcode， swift ；检测 UIWebView 中的超链接点击
文章推荐： javascript - 触发谷歌地图自动完成焦点
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com