Bootstrap 4.平滑滚动工作.nav-link但不在其他锚元素上工作

Question

我正在使用Bootstrap 4，并使用以下jQuery来允许从.nav-links平滑滚动到section id（在同一页面内）：

$('.nav-link').click(function() {
    var sectionTo = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(sectionTo).offset().top
    }, 1500);
});

这适用于.nav-link项目，但如果我尝试添加其他类，则代码不适用于它们。例如，我添加.navbar-brand和.new-button：

$('.nav-link, .navbar-brand, .new-button').click(function() {
    var sectionTo = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(sectionTo).offset().top
    }, 1500);
});

非常感谢任何帮助。

Answer 1

它与bootstrap 4一起工作正常，而且这段代码也正常工作可能在你的其他代码中出错了。

＆＃13;

＆＃13;

$('.test, .nav-link, .navbar-brand, .new-button').click(function() {
    var sectionTo = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(sectionTo).offset().top
    }, 1500);
});

＆＃13;

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a href="#one" class="test">test class</a><br>
<a href="#two" class="navbar-brand">navbar-brand class</a>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div id="one">test class</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div id="two">navbar-brand class</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在CSS中设置滚动行为，它将起到效果。

html {
  scroll-behavior: smooth;
}

以下是示例的链接： https://jsfiddle.net/mzjan/set7aLnp/