更改 JS 代码以使用其他元素 - HTML/CSS/JS答案

【问题标题】：Changing JS code to work with other elements - HTML/CSS/JS更改 JS 代码以使用其他元素 - HTML/CSS/JS
【发布时间】：2023-04-04 19:44:01
【问题描述】：

如果我有以下JS代码：

$(document).ready(function() {
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

这是 HTML：

<a href="#about">
  <div class="containerScroll">
    <div class="first-scroll"></div>
    <div class="second-scroll"></div>
  </div>
</a>

现在滚动效果适用于所有带有标签a的链接；但是，我可以将$("a").on('click', function(event) { 更改为$("scroll").on('click', function(event) { 之类的东西吗？现在，我希望它适用于所有带有 scroll 的标签，所以现在我的 HTML 看起来像：

<scroll href="#about">
  <div class="containerScroll">
    <div class="first-scroll"></div>
    <div class="second-scroll"></div>
  </div>
</scroll>

这行得通吗？本质上，我想添加另一个标签而不是 a，因为我不希望滚动效果发生在 all 链接上，并且只发生在我选择的链接上。这就是为什么我尝试将标签更改为scroll 但它仍然不起作用？我应该定义一个scroll css 属性让它工作吗？

【问题讨论】：

据我所知，HTML 中没有原生的<scroll/> 元素。您是否尝试定义自定义元素/Web 组件？还是对 HTML 在这里的工作原理有一些了解？
我正在尝试定义一个自定义元素
让我使用<scroll/> scroll 应该有什么css属性？
只有hash 属性的元素是<a>
不一定要劝阻您，但是您在这里尝试使用自定义元素的原因是什么？您是否打算为其注入独特的功能？您是否考虑过可访问性影响或用自定义元素替换锚点？

标签： javascript html jquery css custom-element

【解决方案1】：

如今使用 jQuery 进行平滑滚动已毫无意义

有两种方法（#2 是更好的 IMO）

const element = document.querySelector('#something')
// element is the target you're trying to scroll to

JS 方法 - 仅适用于您选择的元素

element.scrollIntoView({ behavior: "smooth" })

CSS 方法

/* in CSS */
html {
    scroll-behavior: smooth;
}

//in JS
element.scrollIntoView()

【讨论】：