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

Posted 2023-05-08

【中文标题】JQuery 平滑滚动 - 这可以简化吗？

【英文标题】：JQuery smooth scroll - can this be simplified?

【发布时间】：2022-01-18 02:13:46

【问题描述】：

我有一些很长的页面。在页脚中，我有一个锚链接将用户带回页眉。我希望能够使用以下 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
    );
  );

是否有可能使这更简单？

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

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

更新

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

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

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

【问题讨论】：

我的意思是，完全删除 jquery 并依赖 css，会更简单，不是吗？

CSS 在 Safari 中不起作用，请参阅帖子

没关系。这不是必需的功能。

我需要滚动平滑，而不是立即滚动。所以这是必要的。

【参考方案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
    );
  );

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

【讨论】：

我已经制作并链接到一个js文件，上面的代码。但是当我单击锚链接时，它会立即滚动到顶部。我是否想编辑此代码/添加我的 ID？我已经用我的 HTML 更新了我的帖子

"above code" 如果你在谈论我的功能elevator 这是正常的。我为您的第一个代码添加了更好的解释（应该可以）。如果我的第一个答案误导了您，我很抱歉。

@user2991837 我在最初的回复中没有回答这个问题，我的错。

启动“功能电梯（where...”的代码不起作用，滚动是立即的。我必须编辑此代码/添加我自己的 ID 吗？

我检查了一下，它工作正常，但是问题又来了，因为我缺乏解释