JQuery 平滑滚动 - 这可以简化吗？

Question

我有一些很长的页面。在页脚中，我有一个锚链接将用户带回页眉。我希望能够使用以下 CSS（但它在 Safari 中不起作用）来使滚动平滑（放慢速度）。

html {
  scroll-behavior: smooth;
}

所以我找到了一些 JQuery。我不懂 JQuery，有一些问题。

  $(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
    });
  });

1. 是否有可能使这更简单？

2.我不确定是否需要将#top 添加到 URL 中？我想要页面做的就是回到顶部（我没有使用锚链接来导航到内容位）。但我不知道如何在不破坏整个内容的情况下删除此代码。我试过了，不知道要删除什么，要保留什么。

1. 这是什么意思“确保 this.hash 有一个值”。我忽略了它，它似乎工作正常。

更新

这是我的 HTML（显然页眉和页脚之间有很多内容）

<header id="top">.... </header>

<footer>
<a href="#top"><img class="to-top" src="resources/arrow.svg"></a>
</footer>

Answer 1

如果您仅将 JQuery 用于此功能，请使用 JavaScript 中的 scrollIntoView。

有了JQuery，这个功能就够了：

function elevator(where) {
    var the_id = "#" + where;
    $('html, body').animate({
        scrollTop:$(the_id).offset().top
    }, 'slow');
    return false;
}

您可以在 html 标签中使用，如下所示：

<h1 id="title">Title at the top of the page</h1>
<!-- a lot of space -->
<button onclick="elevator('title')">go up</button>

注意： CSS 属性不适用于此功能。

现在如果你想解释一下你的代码：

 $(document).ready(function(){
    // Add smooth scrolling to all links
    // i.e. select all links on your page and add en event for each of them
    // event called when there is a click
    $("a").on('click', function(event) {

      // Make sure this.hash has a value before overriding default behavior
      // the hash is the anchor. For example: "website.com/page.html#hash"
      // we must check if there is an hash in the link
      if (this.hash !== "") {
        // Prevent default anchor click behavior
        // i.e. the default behavior of a link
        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
    });
  });

您的代码正在自动为每个链接创建平滑效果。