Bootstrap 4. 在 .nav-link 上平滑滾動，但不適用於其他錨元素

Question

我正在使用 Bootstrap 4，並使用以下 jQuery 來允許從 .nav-links 平滑滾動到部分 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

在 css 中設置滾動行為，它會產生效果。

html {
  scroll-behavior: smooth;
}

這是示例的鏈接： https : //jsfiddle.net/mzjan/set7aLnp/

Answer 2

它與 bootstrap 4 一起工作正常，並且此代碼也可以正常工作，但您的其他代碼可能有問題。

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

 <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>