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

【问题标题】：On click how to keep workable LINK but disable #LINK?单击时如何保持可用的 LINK 但禁用 #LINK？
【发布时间】：2019-11-22 11:59:49
【问题描述】：

我们曾经使用#link 转到页面上所需的部分。还可以使用animate、scrollTop() 使滚动平滑。但是如果#link（哈希链接）在导航菜单上，那么我们必须把它像example.com/pageslug/#sectionid 这样如果我们在一个单独的页面上，那么它会将我们重定向到特定页面的部分。但是由于固定的导航菜单，这会隐藏该部分的一些文本。

同样，如果我们使用animate 和scrollTop()，我们必须使用e.preventDefault()，如果我们使用它，这将阻止页面重定向。

我的问题是如何制作可点击的链接以及使用animate 和scrollTop() 阻止#link。

我不知道这个问题是否正确，但我已经尝试/搜索了很多但没有任何解决方案，所以我来到这里。提前谢谢你。

【问题讨论】：

标签： javascript jquery jquery-animate scrolltop preventdefault

【解决方案1】：

为此，您可以在目标页面上使用 animate 函数，如果 url 有 section Id，此函数将运行。例如。目标网址是

example.com/pageslug/#sectionid.

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

它可以解决你的问题。

【讨论】：

谢谢@Jony 我已经通过检查 url 是否包含 #link 或部分 id 来尝试这个，但在执行 jquery 函数之前 #link 工作并且页面滚动到该部分而没有任何动画。当然它会，因为 DOM 首先工作，然后是 jQuery/Javascript 函数。

【解决方案2】：

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

【讨论】：

亲爱的@Bharat，感谢您的贡献。但请先完美阅读我的查询。我担心的是不同的事情。

【解决方案3】：

感谢为我努力过的人。我有办法克服这个障碍。但我确信它对 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 友好的答案，我们将不胜感激。

【讨论】：

【解决方案4】：

你可以使用event.preventDefault()，当a标签被点击时。

$(document).click('a[href*="#"]', function(e){
  var href = e.target.href;
  var id = href.substring(href.indexOf("#") + 1);
  $('html, body').animate({
    scrollTop: $("#"+id).offset().top - 60
  }, 1000);
})

https://codepen.io/1010543618/pen/XWWwVEd

【讨论】：

PS: 添加``` margin-top: -40px;填充顶部：40px； ```可以让selctions滚动到top: 40px位置
设计怎么样？如果我添加一个 40px 的 padding-top，那么设计就会出错。此外，如果我在询问链接是否在导航菜单上时单击另一个页面上的链接，这将不起作用。
codepen.io/1010543618/pen/GRRbogE 这是一个示例演示，可以让默认散列转到带有一些“填充”的特定片段。