Javascript 单击“如何保持可用链接但禁用#链接？”？

我们曾经使用#link在页面上转到我们想要的部分。还可以使用

动画

，

滚动条（）

使滚动条平滑。但是如果#链接（散列链接）在导航菜单上，那么我们必须像

example.com/pageslaug/#sectionid

那样放置它，这样如果我们在单独的页面上，它会将我们重定向到特定的页面部分。但由于固定的导航菜单，这会从该部分隐藏一些文本

同样，如果我们使用

animate

和

scrollTop（）

则必须使用

e.preventDefault（）

，如果我们使用此选项，将阻止页面重定向

我的问题是如何使用

动画

和

scrollTop（）

制作可点击链接以及块链接

---

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

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

example.com/pageslug/#sectionid.

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

---

它可以解决您的问题。

要禁用可用链接，请使用href=“javascript:void（0）” 如果要使用动画和scrollTop，请使用href=“javascript:void（0）；”

---

如果您想转到页面中的特定部分，请使用超链接中的href=“#sectionid”

感谢您为我所做的尝试。我有办法克服这个障碍。但我相信这不是搜索引擎优化友好

如果我们将URL设置为

example.com/pageslaug？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友好的，我们将不胜感激。

您可以使用

event.preventDefault（）

，当

a

标记单击哈希时

$（文档）。单击（'a[href*=“#”]”，函数（e）{
var href=e.target.href；
var id=href.substring（href.indexOf（“#”）+1）；
$（'html，body'）。设置动画({
scrollTop:$（“#”+id）.offset（）.top-60
}, 1000);
})

---

亲爱的@Bharat，感谢您的贡献。但请先仔细阅读我的问题。我关心的是一些不同的事情。谢谢@Jony，我通过检查url是否包含#链接或节id尝试了这一点，但在jquery函数执行之前，链接工作，页面滚动到该节而没有任何动画。当然，它会的，因为DOM首先工作，jQuery/Javascript之后再工作。PS:add`` margin top:-40px；填充顶部：40px；`可以让选择滚动到

顶部：40px

位置设计如何？如果我加上一个40px的填充顶部，那么设计就会出错。此外，如果我在另一个页面上单击该链接（当我询问该链接是否位于导航菜单上时），这将不起作用。这是一个示例演示，可以通过一些“填充”让默认哈希转到特定的片段。