1.a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="跳转.html#abc">跳转</a>
</body>
</html>
2.b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
width: 100%;
height: 2000px;
background-color: #00FFFF;
}
.b{
width: 100%;
height: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div class="a"></div>
<a name='abc'></a>
<div class="b">aaaa</div>
</body>
</html>
效果:
image.png
image.png
解决锚点链接跳转到新页面因为固定导航栏而因起的内容遮挡问题
<a name="anchor" style="display:block;height:44px;margin-top:-44px;"></a>
给锚点所在元素设高度【元素的高度==导航栏的高度】,这样一来,锚点所在元素的下一个兄弟节点元素内容就不会被导航栏遮住了。但是可能会空出一部分,所以这时候就需要margin-top了,之所以margin-top:-44px,就是为了将锚点所在元素,所占的位置移动回去,这样就不会造成有空缺部分出现了。
<a href="{:url('/index/index/productitem',array('id'=>$item.id),'#little-item')}">
<a name='little-item' style="display:block;height:111px;margin-top:-111px;"></a>