javascript - 平滑滚动到内部链接的最佳方法

Question

我搜索并看到了很多关于这个主题的例子，但我找不到最适合我的方法。

我对 JS 和 jQuery 有点熟悉，我想问一下平滑滚动的问题。

    <a name="urunler"></a>
<ul>
    <li><a href="#ppanjur" class="uruna">Plastik Panjur</a></li>
    <li><a href="#ipanjur" class="uruna">Alüminyum (İthal / Yalıtımlı) Panjur</a></li>
    <li><a href="#opanjur" class="uruna">Otomatik Panjur</a></li>
    </ul>

我有一个这样的导航。这会立即滚动。但我想慢慢做。哪种方法最短、最简单？我对JS比较熟悉，不想下载和使用JS插件。

1. 我需要了解链接的点击方法的完整语法(它们都具有相同的类)
2. 我应该从链接中删除 href park 吗？

等待您的帮助并仍在搜索

编辑!!!:在这种情况下，我只需要一个类。是否可以为多个类提供此属性？

    function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});

我有('click', 'a.uruna', function ()，我如何在这里插入另一个类或者我应该写:

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});
$(document).on('click', 'a.new', function () {
    scrollToElement($(this).attr('href'));
});

Answer 1

也可以在样式表中使用以下内容在纯 CSS 中完成。

html{
   scroll-behavior: smooth
}