Question

我在尝试在页面中滚动时有一些问题，基本上我在这样的页面周围有锚标签：

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

我正在使用以下javascript工作正常，但问题是，如果我使用此脚本，bootstrap 3的模态和其他功能中断并且不再起作用

  $('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进行测试感谢

Answer 1

$('a[href*=#]:not([href=#])')将非常通用也将更改目标锚点，例如模态。尽量减少通用性：

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

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

Answer 2

如果您更换

a[href*=#]:not([href=#])

带

a[href*=#]:not([href=#]):not([href=#idname])

您可以阻止平滑滚动为该特定链接工作

平滑滚动Bootstrap 3

2 个答案: