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

时间:2019-09-03 06:19:32

标签: javascript html css anchor-scroll

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

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

我希望此平滑Scrolling属性仅适用于我页面中的单个锚点(对于本示例来说,第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>

2 个答案:

答案 0 :(得分:1)

  • 将“平滑滚动”添加到“链接名称”字段。
  • 从“位置”菜单中选择“身体末端标记之前”。
  • 将下面的脚本粘贴到空白字段中。
    <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>
  • 单击对话框右下角的“保存代码”按钮 框。

答案 1 :(得分:1)

这是我使用(香草)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">&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>