Jquery 用于软滚动到锚点破坏页面链接的脚本

Question

我的 jquery 我用来 "soft scroll" 在点击 link 时向下移动页面似乎破坏了页面上的所有 link。我刚刚注意到为什么要开发这个网站。这是我的 jquery.

/*-------------------
ANIMATION SCROLLING TO CATEGORYS ON PAGE
---------------------*/
var $root = $('html, body')

$(document).on('click', 'a', function (event) {
    event.preventDefault();
    $root.animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 750);
    return false;
});

如果我删除此代码，网站上的所有内容都可以正常工作。

当我放回此代码时，软滚动对页面上的锚点有效，但它会破坏我页面上的所有 link。无论是我网站上的相关 link 还是外部 link。单击页面上的任何 links 都没有任何作用，就像甚至没有 links 一样。

有谁知道为什么这会导致我所有的 link 无法正常工作？

更新

我得到这个来改变我的内部 links 并向它们添加 class。

<a href="#cats" class="internal">

然后将 javascript 更改为

$(document).on('click', 'a.internal', function (event)

我的原始代码取消了页面上所有 link 的所有默认行为。感谢 GentlemanMax

更新了答案

Answer 1

当您这样做时，您将绑定到页面上的每个 link：

$(document).on('click, 'a', function(event){...

你说的是类似“当有人点击文档中的任何 a 标签时，执行此操作。由于回调的第一行是 event.preventDefault()，默认 link行为被阻止。您需要过滤事件绑定以仅阻止内部 link 上的正常 link 行为。

如果可能，最好的选择是在内部 link 中添加一个 class，这样您就可以将函数更改为这样的东西

$(document).on('click', 'a.internal-page`, function(event){...

如果这不可能，您可以对单击的 link 的 href 属性做一些逻辑，以在调用 event.preventDefault() 之前确认它是内部的。

Jquery 用于软滚动到锚点破坏页面链接的脚本

Jquery script to soft scroll to anchors breaking links on page

jquery

jquery-animate

更新