平滑滚动的Bootstrap 3 [英] Smooth scrolling Bootstrap 3

问题描述

我在尝试使页面平滑滚动时遇到一些问题，基本上我在这样的页面周围有锚标签:

I am having some issue trying to have a smooth scroll in my page, basically I have anchor tags around a page like this:

<li><a href="#description">Module Description</a></li>
...
<section id=" description ">

我正在使用以下运行良好的javascript，但问题是，如果我使用此脚本，则bootstrap 3的模式和其他功能会中断并且不再起作用

And I am using the following javascript that works fine, but the problem is that if I use this script, the modal and other features of bootstrap 3 breaks and doesn’t work anymore

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

我想知道该脚本的解决方案是什么，或者还有其他类似的脚本已通过bootstrap 3进行了测试 谢谢

I am wondering what could be a solution to this script or there is other similar script that is tested with bootstrap 3 Thanks

推荐答案

$('a[href*=#]:not([href=#])')将非常通用，例如，还会更改目标锚点，例如模态.尝试使其通用性降低:

$('a[href*=#]:not([href=#])') will be very generic will also change the target anchors for by example the modal. Try to make it less generic:

<ul id="insidepagenav">
<li><a href="#description">Module Description</a></li>

$('ul#insidepagenav > li > a[href*=#]:not([href=#])')

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