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

Question

如果我有以下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，因为我不希望滚动效果发生在所有链接上，而只是发生在我选择的链接上。这就是为什么我尝试将标记更改为scroll，但仍然不起作用？我应该定义一个scrollcss属性让它工作吗？

Answer 1

现在使用jQuery进行平滑滚动毫无意义

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

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

1. JS方法-只适用于您选择的元素

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

2. CSS方法

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

//in JS
element.scrollIntoView()