如何为 Bootstrap 的滚动间谍功能添加平滑滚动 [英] How to add smooth scrolling to Bootstrap's scroll spy function

问题描述

一段时间以来，我一直在尝试向我的网站添加平滑滚动功能，但似乎无法使其正常工作.

这是与我的导航相关的 HTML 代码:

<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675"><div class="navbar-inner" data-spy="affix-top"><div class="容器"><!-- .btn-navbar 用作折叠导航栏内容的切换 --><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><!-- 所有你想隐藏在 940px 或更小的地方，都放在这里 --><div class="nav-collapse collapse"><ul class="nav"><li><a href="#home">首页</a></li><li><a href="#service-top">服务</a></li><li><a href="#contact-arrow">联系方式</a></li></ul><!--/.nav--></div><!--/.nav-collapse 折叠 向右拉--></div><!--/.container--></div><!--/.navbar-inner--></div><!--/#nav/.navbar navbar-inverse--></div><!--/#nav-wrapper-->

这是我添加的JS代码:

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script><脚本>$(document).ready(function(e) {$('#nav').scrollSpy()$('#nav ul li a').bind('click', function(e) {e.preventDefault();目标 = this.hash;控制台日志(目标)；$.scrollTo(target, 1000);});});

对于它的价值，这里是我收到有关什么的信息的地方到目前为止，我已经完成了，这里是我的网站的当前形式.如果你能帮我，我会给你烤馅饼或饼干之类的.谢谢！

解决方案

你真的需要那个插件吗?您可以为 scrollTop 属性设置动画:

$("#nav ul li a[href^='#']").on('click', function(e) {//防止默认锚点点击行为e.preventDefault();//存储哈希var hash = this.hash;//动画$('html, body').animate({scrollTop: $(hash).offset().top}, 300, 函数(){//完成后，将哈希添加到 url//(默认点击行为)window.location.hash = 哈希；});});

小提琴

I've been trying to add a smooth scrolling function to my site for a while now but can't seem to get it to work.

Here is my HTML code relating to my navigation:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

Here is the JS code I've added:

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>

<script>
    $(document).ready(function(e) {

        $('#nav').scrollSpy()
        $('#nav ul li a').bind('click', function(e) {
            e.preventDefault();
            target = this.hash;
            console.log(target);
            $.scrollTo(target, 1000);
        });
    });
</script>

For what it's worth, here is where I received info on what I've done so far, and here is my site in it's current form. If you can help me I'll bake you a pie or cookies or something. Thanks!

解决方案

Do you really need that plugin? You can just animate the scrollTop property:

$("#nav ul li a[href^='#']").on('click', function(e) {

   // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;

   // animate
   $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 300, function(){

       // when done, add hash to url
       // (default click behaviour)
       window.location.hash = hash;
     });

});

fiddle

这篇关于如何为 Bootstrap 的滚动间谍功能添加平滑滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！