单击时如何保持可用的 LINK 但禁用 #LINK？

Question

我们曾经使用#link 转到页面上我们想要的部分。也可以使用animate,scrollTop()使滚动平滑。但是如果#link（哈希链接）在导航菜单上，那么我们必须这样放置，example.com/pageslug/#sectionid这样如果我们在单独的页面上，那么它会将我们重定向到特定页面的部分。但是由于固定的导航菜单，这隐藏了该部分的一些文本。同样，如果我们正在使用animate并且scrollTop()我们必须使用e.preventDefault()并且如果我们使用它，这将阻止页面重定向。我的问题是如何制作可点击的链接以及用animate和阻止#link scrollTop()。我不知道这个问题是否正确，但我已经尝试/搜索了很多但没有任何解决方案，所以我来到这里。先感谢您。

Answer 1

禁用可行的链接使用 href = "javascript:void(0)" 如果你想使用 animate 和 scrollTop 使用 href = "javascript:void(0);" 如果您想进入页面中的特定部分，请在超链接中使用 href="#sectionid"

Answer 2

谢谢为我努力过的人。我有办法克服这个障碍。但我确信它不是 SEO 友好的。

如果我们将 URL 设为 example.com/pageslug?id=sectionid

那么下面的功能可以帮助你。

$.urlParam = function(name){ // function to get the section id passed through URL

    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);

    return results[1] || 0;

}

var sectionid = $.urlParam('id');

if(sectionid != null) {

    $('html, body').animate({

        scrollTop: $("#"+sectionid).offset().top - 100

    }, 1000);

}

但是，如果有任何更好的答案和/或对 SEO 友好的答案，我们将不胜感激。

Answer 3

为此，您可以在目标页面上使用动画功能，如果 url 具有部分 ID，则此功能将运行。例如，目标网址是

example.com/pageslug/#sectionid.

在“example.com/pageslug”页面上编写动画函数，如果要检查的条件是 url 包含部分 id。如果部分 id 存在，则动画函数将执行以显示该部分的内容。

它可以解决你的问题。