如何将平滑滚动添加到单个锚点而不是整个页面

Question

我在我的页面中创建了 2 个锚点默认情况下，每当点击锚点 link 时，它会直接跳转到请求的部分

启用平滑滚动的一种简单方法是将其添加到 CSS 文件中，但它会影响整个 html 页面，我不希望这样

我希望这种平滑的滚动属性仅适用于我页面中的单个锚点（假设本例中的第 1 节锚点），而不是所有锚点都适用

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">&nbsp;</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">&nbsp;</a>

Answer 1

向 Link 名称字段添加平滑滚动。
Select 在“放置”菜单中的正文结束标记之前。
将下面的脚本粘贴到空白字段中。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script>
      jQuery(function($) {

        // The speed of the scroll in milliseconds
        var speed = 1000;

        // Find links that are #anchors and scroll to them
        $('a[href^=#]')
          .not('.lp-pom-form .lp-pom-button')
          .unbind('click.smoothScroll')
          .bind('click.smoothScroll', function(event) {
            event.preventDefault();
            $('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
          });
      });
    </script>

点击对话框右下角的保存代码按钮盒子.

Answer 2

这是我使用 (Vanilla) 的解决方案 JavaScript。

我只是根据 link 上设置的 data-smooth-scroll 属性切换 <html> 元素的 className。

"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">&nbsp;</a>
<section>
  <h2>Section 2</h2>
</section>

<a class="anchor" id="Section2">&nbsp;</a>
<section>
  <h2>Section 2</h2>
</section>

<a class="anchor" id="Section3">&nbsp;</a>
<section>
  <h2>Section 3</h2>
</section>

如果您不希望 link 决定是否平滑滚动，而是目标锚点，这应该可以工作

"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">&nbsp;</a>
<section>
  <h2>Section 2</h2>
</section>

<a class="anchor" id="Section2" data-smooth-scroll="1">&nbsp;</a>
<section>
  <h2>Section 2</h2>
</section>

<a class="anchor" id="Section3">&nbsp;</a>
<section>
  <h2>Section 3</h2>
</section>

如何将平滑滚动添加到单个锚点而不是整个页面

How to add smooth Scrolling to single anchor instead of whole page

html

javascript

css

anchor-scroll