需求
页面上有一排按钮,悬浮在窗口顶端,不随页面滑动而滑动,这一组按钮分别对应的是页面的各个部分,点击按钮,页面定位到对应的位置。
需求分析
拿到这个需求,很自然的想到,解决这个最简单的方法是使用锚点(能靠HTML和css解决的,尽量不使用js
解法
想到使用锚点事情就比较简单了,借用a标签的href定位,很快就写了一个Demo,
完整代码:https://codepen.io/yangyang11...
关键代码:
<div id="content">
<div class="btn-container">
<a class="btn" href="#anchor1">锚点1</a>
<a class="btn" href="#anchor2">锚点2</a>
<a class="btn" href="#anchor3">锚点3</a>
</div>
<div id="anchor1" class="anchor-con">anchor1</div>
<div id="anchor2" class="anch