我在我的页面中创建了 2 个 anchor 默认情况下，无论何时单击 anchor 链接，它都会直接跳转到请求的部分
启用平滑滚动的一种简单方法是在 CSS 文件中添加它，但它会影响整个 html 页面，我不希望这样
我希望这个平滑的滚动属性只适用于我页面中的单个 anchor (假设本例中的第 1 节 anchor )，而不是所有 anchor 都适用
HTML 代码包含在下面的片段中
html {
scroll-behavior: smooth;
}<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<a class="anchor" id="Section1"> </a>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
<a class="anchor2" id="Section2"> </a>最佳答案
这是我使用 (Vanilla) JavaScript 的解决方案。
我只是切换了 className的 <html>元素依赖于 data-smooth-scroll在链接上设置的属性。
"use strict";
document.addEventListener('click', function(e) {
var className = 'smooth';
var classList = document.documentElement.classList;
if (e.target.dataset.smoothScroll) {
classList.add(className)
} else {
classList.remove(className)
}
})html.smooth {
scroll-behavior: smooth;
}
section {
width: 80%;
border: 1px solid gold;
margin: 50px auto;
height: 100vh;
}<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>
<a href="#Section3" data-smooth-scroll="1">Section 3</a>
<a class="anchor" id="Section1"> </a>
<section>
<h2>Section 2</h2>
</section>
<a class="anchor" id="Section2"> </a>
<section>
<h2>Section 2</h2>
</section>
<a class="anchor" id="Section3"> </a>
<section>
<h2>Section 3</h2>
</section>如果您不希望链接决定是否平滑滚动而是目标 anchor ，这应该可以工作
"use strict";
document.addEventListener('click', function(e) {
var className = 'smooth';
var classList = document.documentElement.classList;
classList.remove(className)
if (e.target.tagName.toLowerCase() === 'a') {
var id = e.target.hash.replace(/^#/, '')
var anchor = document.getElementById(id);
if (anchor && anchor.dataset.smoothScroll) {
classList.add(className)
}
}
})html.smooth {
scroll-behavior: smooth;
}
section {
width: 80%;
border: 1px solid gold;
margin: 50px auto;
height: 100vh;
}<a href="#Section1">Section 1</a><br>
<a href="#Section2">Section 2</a>
<a href="#Section3">Section 3</a>
<a class="anchor" id="Section1"> </a>
<section>
<h2>Section 2</h2>
</section>
<a class="anchor" id="Section2" data-smooth-scroll="1"> </a>
<section>
<h2>Section 2</h2>
</section>
<a class="anchor" id="Section3"> </a>
<section>
<h2>Section 3</h2>
</section>关于javascript - 如何将平滑滚动添加到单个 anchor 而不是整个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57765996/