一、科普时间
hash
hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。
location.hash=anchorname。
锚点
二、锚点简单的栗子
1 |
|
解析
访问该页面的地址:http://127.0.0.1/anchor.html
(我是在本地服务器上测试的)
点击a链接锚点1,则页面会直接跳到红色的div(锚点1),同时,浏览器地址改变为http://127.0.0.1/anchor.html#anchor1
虽然可以直接定位到制定的位置,但是效果很差,没有平缓的过渡效果。
三、改进过渡效果
前期理论准备
既然hash值是对应锚点的id值,那如果改为js动态获取hash值,然后再根据hash值获得dom对象。最后,用js进行平缓过渡。
基于这个思路,就必须要求hash的取名有独特性,不能跟页面中的任何一个id一致,否则会触发浏览器默认的锚点定位行为。
确定特殊hash命名
hash命名直接取特殊的前缀:w_,比如锚点1对应的hash值为w_anchor1
1 |
|
编写读取特殊hasn值的方法以及缓动方法(本示例不考虑兼容性)**
1 | (function(window, undefined){ |
在线演示:https://wall-wxk.github.io/blogDemo/anchor/anchor.html
最后,附上完整示例源码
1 |
|