html页面中出现奇怪的链接问题

Weird link issue in html page

本文关键字：链接 问题 html      更新时间：2023-09-26

我的代码中有几个<a>标记。

但是，用户单击<a>标记后，浏览器将跳转到页面的顶部。

例如：

texts
…..
elements
…...
texts
…..
elements
…...
texts
…..
elements
…...
//the user has to scroll down to here to see the <a> tag.
//once click, the page will jump to the top (scroll to top) for some reason.
<a href = '#' >click here</a>

我知道我可能没有提供足够的信息，但我想知道是否有人能想出这件奇怪事情的原因。我没有创建原始代码，文件中有很多代码。。非常感谢你的帮助！

在锚<a>标记中为href属性使用hastag #将导致链接跳到顶部。

<a href='#'>click here</a>

您可以通过将ID直接包含在标签后面的锚点标签中来指定要跳转到的ID。

例如：

点击：

<a href='#myElement'>Go to My Element</a>

页面将跳转到：

<div id='myElement"></div>

$('a[href^=#]').on('click',function(e){
    e.preventDefault();
});

如果您不希望链接表现得像链接，请使用不同的元素。如果这是您使用链接的原因，请使用CSS为其提供正确的外观和悬停行为。

如果元素被赋予了id，那么：

<a href = '#someid' >click here</a>

将跳转到页面中的那个位置（将该元素放在页面顶部）。如果没有指定id，"#"只会导致它跳到页面顶部。

这是锚点标记的行为。当用户单击锚定标签（链接）时，浏览器将跟随该标签的href值。

#引用是引用当前文档顶部的标准方式。因此，当用户单击<a href="#">click here</a>时，浏览器会将用户带到当前文档的顶部。

这不是一件奇怪的事情，而是链接在HTML中的工作方式。

相关文章：