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

Question

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

\n\n

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

\n\n

    <a name="urunler"></a>\n<ul>\n    <li><a href="#ppanjur" class="uruna">Plastik Panjur</a></li>\n    <li><a href="#ipanjur" class="uruna">Al\xc3\xbcminyum (\xc4\xb0thal / Yal\xc4\xb1t\xc4\xb1ml\xc4\xb1) Panjur</a></li>\n    <li><a href="#opanjur" class="uruna">Otomatik Panjur</a></li>\n    </ul>\n

\n\n

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

\n\n

\n
1. 我需要了解链接的单击方法的完整语法（它们都具有相同的类）
\n
2. 我应该从链接中删除 href 公园吗？
\n

\n\n

等待您的帮助并仍在寻找

\n\n

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

\n\n

    function scrollToElement (selector) {\n  $(\'html, body\').animate({\n    scrollTop: $(selector).offset().top\n  }, 2000);    \n};\n\n$(document).on(\'click\', \'a.uruna\', function () {\n    scrollToElement($(this).attr(\'href\'));\n});\n

\n\n

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

\n\n

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

\n

Answer 1

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

html{
   scroll-behavior: smooth
}