具有平滑滚动且不会重复的顶部锚点

Question

 $(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
      }, 1000, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = none;
      });
    } // End if
  });
});

我正在运行它以平滑滚动到“#top”而不更改 url-hash。我无意中发现了一种修改它的方法，这样 URL 就不会更新（为“window.location.hash”添加了“none”），但是有一个问题；现在函数不会重复了。

会发生以下情况：

• 加载页面
• 向下滚动
• 按顶锚
• 页面滚动到顶部（不更新 url）
• 再次向下滚动
• 按顶锚
• 什么都没有发生

不知道我从哪里得到这个 sn-p，但我已经在我的 js 文件夹中有一段时间了。

Answer 1

您混合了两种滚动页面的方式。

hash 是 URL 中的 #something...对于在页面加载时滚动到锚点很有用。

在此链接中查看#hello 效果：https://codepen.io/Bes7weB/pen/ybWNbJ?editors=1111#hello

然后，为了让用户滚动到页面顶部，我会在触发滚动功能的链接的href 中使用顶部锚点的id。
这将触发此特定链接上的功能，而不是页面中的所有链接。 ;)

最后，这一行：window.location.hash = none; 正在尝试将原始 onload 哈希值更改为 none，这被解释为一个未定义的变量，因为它需要一个字符串。

ReferenceError: none 未定义

我会简单地删除该行...
或者如果你真的想清除哈希值：

window.location.hash = "";

工作滚动顶部功能：查看 codePen 以了解 HTML 标记已更改）

 $(document).ready(function(){
  // Add smooth scrolling to all links
  $("a#backTOtop").on('click', function(event) {
    console.log($(this).attr("href"));

    // Make sure this.hash has a value before overriding default behavior
    if ($(this).href !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var top = $(this).attr("href");

      // 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: $(top).offset().top
      }, 1000, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        // window.location.hash = none;
      });
    } // End if
  });
});

Answer 2

如果您不需要影响 url 哈希，只需删除（或用 // 注释）该行代码；因为它会在 javascript 中生成错误。

如果您想从 url 中删除哈希，请尝试以下代码：

history.pushState('', document.title, window.location.pathname + window.location.search);

• 来源：How to remove the hash from window.location with JavaScript without page refresh?