twitter-bootstrap Bootstrap 4. 在 .nav-link 上平滑滚动，但不适用于其他锚元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49173297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4. Smooth scrolling working on .nav-link but not on other anchor elements
提问by FruityPixels
I'm using Bootstrap 4, and am using the following jQuery to allow smooth scrolling from the .nav-links to section id's (within the same page):
我正在使用 Bootstrap 4，并使用以下 jQuery 允许从 .nav-links 平滑滚动到部分 ID（在同一页面内）：
$('.nav-link').click(function() {
var sectionTo = $(this).attr('href');
$('html, body').animate({
scrollTop: $(sectionTo).offset().top
}, 1500);
});
This works great for .nav-link items, but if I try to add other classes, the code does not work on them. eg, I add .navbar-brand and .new-button:
这对 .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);
});
Any help greatly appreciated.
非常感谢任何帮助。
回答by Rohit Verma
Its working fine with bootstrap 4 and this code also working fine may be something wrong in your other code.
它与 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>回答by Janek
Set scroll-behavior in css and it will do the effect.
在 css 中设置 scroll-behavior 就会产生效果。
html {
scroll-behavior: smooth;
}
Here's a link to the example: https://jsfiddle.net/mzjan/set7aLnp/
这是示例的链接：https: //jsfiddle.net/mzjan/set7aLnp/
