怎样实现页面内链接到特定位置（锚点跳转）？
最编程
2024-08-02 14:55:32
...
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>