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

【问题标题】：How to add smooth Scrolling to single anchor instead of whole page如何将平滑滚动添加到单个锚点而不是整个页面
【发布时间】：2019-09-04 15:34:42
【问题描述】：

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

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

我希望这个平滑的 Scrolling 属性仅适用于我页面中的单个锚点（比如说本示例的第 1 节锚点），而不是普遍适用于每个锚点

sn-ps 中包含以下 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>

【问题讨论】：

我喜欢这个问题，但我怀疑是否可以单独使用 CSS 解决
虽然我不熟悉 JavaScript，但如果它包含在答案中就很好，因为处理这个问题的 Javascript 很可能不会是 6,7 行，所以不是问题

标签： javascript html css anchor-scroll

【解决方案1】：

这是我使用（原版）JavaScript 的解决方案。

我只是根据链接上设置的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>

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

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

【讨论】：

【解决方案2】：

将平滑滚动添加到链接名称字段。
从 Placement 菜单中选择 Before Body End Tag。
将下面的脚本粘贴到空白字段中。

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

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

【讨论】：

试过了，但似乎不起作用。你可以请发送一个 jsfiddle 或显示输出的东西