可以使用网页的锚点，即<a>标签的id属性，如<a id="C6">Chapter 6</a>当从另处页面连接到该页地址加#C6时就会跳转到此处。
示例：
网页a.htm
<!DOCTYPE html>
<head>
<title>A</title>
</head>
<body>
<a href="b.htm#C6">B - Chapter 6</a>
</body>
</html>
网页b.htm
<!DOCTYPE html>
<head>
<title>B</title>
</head>
<body>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2><a id="C6">Chapter 6</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
div 不支持 name 这个属性来创建锚点.锚点是在 a 标签的 name 属性另外,根据 Mozilla 的文档,html5 中,a 的 name 属性也不支持了.改为了搜索唯一的 id 属性
例如使用/Home/Index#data2跳转到A页面，页面并不会进行锚点指向，但是当页面加载完成后，把链接中的#data2改为#data3就可以直接跳转到指定位置，锚点又生效了，通过这个测试我们可以大致得知，通过链接到达A页面后，在页面还未加载完成时锚点指向已经执行了，故无法定位到指定锚点。
具体解决思路及办法：
通过js中的setTimeout函数，来延迟锚点的执行，等待页面全部加载完毕后再定位到指定锚点，具体的JS代码如下：
1、方法一：
给锚点文本标签添加id，使用<a href="#"></a>来定位，当单击a链接时，就会跳到id为a01的p标签处；
如：
<div><a href="#a01"></a></div>
<p>练习</p><p>练习</p><p>练习</p><p>练习</p><p>练习</p>
<p id="a01">练习</p>
这样的定位可以针对任何标签来定位。
2、方法二：
给a标签的文本添加锚点，单击链接可跳到name为a01的a标签处；
如：
<div><a href="#a01"></a></div>
<p>xxx</p><p>xxx</p><p>xxx</p><p>xxx</p><p>xxx</p>
<a name="a01" href=“#”>练习</a>
使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。
3、方法三：
使用js，如：
<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>
扩展资料：
类似的html元素用法：
1、超链接对象
超链接是超级链接的简称。如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
2、动态静态
超链接还可以分为动态超链接和静态超链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的超链接，例如可以实现将鼠标移动到某个文字链接上。而静态超链接，顾名思义，就是没有动态效果的超链接。
参考资料来源：百度百科-描点
参考资料来源：百度百科-超链接
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）