如何使滚动平滑?

Question

我使用bootstrap，这是我的代码。如何使滚动平滑?请帮帮我

<div id="navbar-normal" class="navbar navbar-expand-lg">
<div class="container">
<a href="" class="navbar-brand">
<img src="assets/images/logo.svg" alt="">
</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#news" class="nav-link">News</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</div>
<section id="home"><h1>Home</h1></section>
<section id="about"><h1>About</h1></section>
<section id="news"><h1>News</h1></section>
<section id="contact"><h1>Contact</h1></section>

Answer 1

你不需要使用javascript来添加平滑滚动，它可以通过设置scroll-behavior: smooth;css属性来完成。例子:

html {
scroll-behavior: smooth;
}

然而，并不是所有的浏览器都支持

通过使用像scroll-js这样的库，你可以在像safari这样的浏览器上获得滚动。

Answer 2

你的意思并不明显。如果你的意思是你想让页面顺利地从一个锚链接到下一个，使用CSSscroll-behavior。如果您希望页面上的元素在用户使用手指或鼠标滚轮滚动时流畅地移动，我建议使用机车滚动或类似的工具。但是，您可能正在寻找第一个选项。

CSSscroll-behaviordemo:

:root {
scroll-behavior: smooth;
}
/* demo */
nav {
display: block;
height: 1rem;
position: fixed;
}
section { 
height: 100vh; 
padding-top: 2rem;
}

<nav>
<a href="#a">Go to A</a>
<a href="#b">Go to B</a>
<a href="#c">Go to C</a>
</nav>
<section id="a">Section A</section>
<section id="b">Section B</section>
<section id="c">Section C</section>

Answer 3

你不需要使用javascript来添加平滑滚动

在CSS中使用这个

:root{
behavior: smooth;
}

Answer 4

在CSS中使用这个

:root{
scroll-behavior: smooth;
}

在JavaScript中使用这个

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e){
e.preventDefault()
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
})
})
})