另外,根据 Mozilla 的文档,html5 中,a 的 name 属性也不支持了.改为了搜索唯一的 id 属性
例如使用/Home/Index#data2跳转到A页面,页面并不会进行锚点指向,但是当页面加载完成后,把链接中的#data2改为#data3就可以直接跳转到指定位置,锚点又生效了,通过这个测试我们可以大致得知,通过链接到达A页面后,在页面还未加载完成时锚点指向已经执行了,故无法定位到指定锚点。
具体解决思路及办法:
通过js中的setTimeout函数,来延迟锚点的执行,等待页面全部加载完毕后再定位到指定锚点,具体的JS代码如下:
比如现在有t1.html和t2.html两个页面,t1页面中需要设置超链接跳转到t2页面中的锚点a1位置,则需要按如下步骤进行设置:
1、t1页面中设置超链接href属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t1页面</title>
<style>
html,body{margin:0padding:0background-color:#ccc}
.anchor{display:blockpadding:5px 10pxbackground-color:#aaa}
</style>
</head>
<body>
<a href="./t2.html#a1" target="_blank" class="anchor">跳转到t2页面a1</a>
</body>
</html>
2、t2页面中设置锚点元素的ID为a1。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t2页面</title>
<style>
html,body{margin:0padding:0background-color:#ccc}
.anchor{display:blockpadding:5px 10pxbackground-color:#aaa}
.placeholder{height:800pxpadding:5px}
</style>
</head>
<body>
<div class="placeholder">占位div1</div>
<a id="a1" href="#" class="anchor">锚点a1</a>
<div class="placeholder">占位div2</div>
</body>
</html>
3、浏览器中打开t1页面(以Chrome浏览器为例,其他浏览器操作一样)。
4、点击“跳转到t2页面a1”,Chrome浏览器会新开一个标签页打开t2页面,此时锚点a1在浏览器可视范围内并且位于页面的顶端。这样,外部锚点链接就设置成功了。
页内跳转,一般使用锚点标记和 Name(名称)属性 。name属性用来命名锚点,创建已命名的锚点. 我们可以使用命名了的锚点, 直接跳到一个网页中的指定部分处. 避免用户上下拖动鼠标, 在页面上苦苦寻找.
下面是一个命名锚点的语法:
<a name="label">Text to be displayed</a>
name属性用来创建一个已命名锚点. 锚点的 name(名称)属性的值可以是任何文本, 也就是可以自由设置它的名字,如同css的class命名一样。
下面一行定义了一个已命名锚点:
<a name="tips">有用的提示</a>
一个命名了的锚点并不以特别的方式显示, 与没有命名的锚点显示相同。
为了直接链接到 "tips" 部分, 在URL后面, 添加一个 # 和一个锚点名, 例如:
<a href="/sl.html#tips">跳到有用的提示部分</a>
在文件 "sl.html"内部, 对“有用的提示”部分的超级链接, 是下面这样的:
<a href="#tips">跳到有用的提示部分</a>