详细解说CSS锚点的使用（新手）-木庄网络博客

本文摘自PHP中文网，作者烟雨青岚，侵删。

CSS锚点使用有两种方法，我建议使用下面这种：

1	`<a href='#one'>到达第一个锚点</a>`

1	`<a href='#two'>到达第二个锚点</a>`

1	`<p id='one'>我是第一个锚点</p>`

1	`<p id='two'>我是第一个锚点</p>`

这样当我们点击A链接时，对应的DOM节点就会滚动到窗口顶部。

但有时我们的需求并不是让它滚动到窗口顶部。可能要他距离顶部有一定的距离。这时候可以由以下方法解决。

1	`<a href='#one'>到达第一个锚点</a>`

1	`<a href='#two'>到达第二个锚点</a>`

1	`<p id='one'` `style='margin:top:-100px;padding-top:100px'>`

1	`<p >我是第一个需要滚动的内容</p>`

1	`<p id='two'` `style='margin:top:-100px;padding-top:100px'>`

1	`<p >我是第二个需要滚动的内容</p>`

这样就可以达到滚动后距离顶部200px的效果。而不影响原页面的样式

感谢大家的阅读，希望大家收益多多。

本文转自：https://blog.csdn.net/baidu_32519511/article/details/52668834

推荐教程：《CSS教程》https://www.php.cn/css-tutorial.html

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者