【问题标题】:bootstrap scrollspy with smooth scroll wrong targetbootstrap scrollspy 平滑滚动错误目标
【发布时间】:2018-08-05 02:38:43
【问题描述】:

我尝试使用引导程序使 Scrollspy 平滑滚动。这可行,但滚动目标错误。

你可以看到我的小提琴:http://jsfiddle.net/gdfqtLxh/12/

>> THIS SCREENSHOT <<

更新视频:https://youtu.be/pZCc90Dv5kw

如果您点击第二个菜单,它会很好地工作,但是当您点击第三个菜单时,它不会转到正确的目标。

这是我的 javascript..

$("#list-example a[href^='#']").on('click', function(e) {

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

  // store hash
  var hash = this.hash;

  // animate
  $('.scrollspy-example').animate({
    scrollTop: $(hash).offset().top
  }, 300);

});

更新视频(添加了一些文字):https://youtu.be/921oDDaSZq0

【问题讨论】:

  • 我检查了您的 jsfiddle,但一切正常(单击第三个按钮选择右侧部分)。你还有这个问题吗?
  • 是的,你可以看到youtu.be/pZCc90Dv5kw
  • youtu.be/921oDDaSZq0(添加了一些文字)

标签: bootstrap-4 smooth-scrolling scrollspy


【解决方案1】:

您的 jsfiddle 在 Firefox 中可以正常工作,但在 Chrome 中却不能。

我用 bootstrap 的原始链接替换了你所有的 js 和 css 链接,以防它们已经过时,现在它可以在 Chrome 中使用。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

在这里查看这个 jsfiddle:http://jsfiddle.net/h6nc9ro4/

我还取出了你的 JavaScript 代码,因为它不是必需的。

【讨论】:

  • 注意:虽然它有效,但没有正确选择正确的活动链接。我还在调查。
  • 我是用JavaScript来让滚动平滑的。。这就是问题。。如果我不添加平滑滚动,它会像你的一样正常。
  • 这个答案可能对你有帮助:stackoverflow.com/questions/32922813/…
猜你喜欢
  • 2015-12-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-13
  • 1970-01-01
  • 2016-03-05
  • 1970-01-01
相关资源
最近更新 更多