html5将锚点隐藏后跳转不出来

html-css013

html5将锚点隐藏后跳转不出来,第1张

div 不支持 name 这个属性来创建锚点.锚点是在 a 标签的 name 属性

另外,根据 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>