用Javascript实现锚点(Anchor)间平滑跳转

本文介绍的方法,实现了锚点(Anchor)间平滑跳转,效果非常不错。

锚点(Anchor)相信很多人都不陌生,它方便访问者在页面的不同位置快速跳转,直接找到自己感兴趣的内容,如果说 RSS 是整个网站的摘要,那锚点就是一个页面的摘要,通常一个页面内容很多的时候,都会用锚点来定位。

但是锚点也有个问题,通常点击锚点后,页面会立即跳到目标位置,而本文介绍的方法,实现了锚点(Anchor)间平滑跳转,效果非常不错。
复制代码 代码如下:




调用方式:
复制代码 代码如下:

scroller(el, duration)
el : 目标锚点 ID
duration : 持续时间,以毫秒为单位,越小越快

HTML:
复制代码 代码如下:




header_1 --> header_4





header_2 --> header_5





header_3 --> header_6





header_4 --> header_7





header_5 --> header_3





header_6 --> header_2





header_7 --> header_1




测试代码:
复制代码 代码如下:







用 Javascript 实现锚点(Anchor)间平滑跳转 - 平滑, 锚点, Anchor, 跳转, 滚动, javascript,














    

用 Javascript 实现锚点(Anchor)间平滑跳转



    










    
    header_1 --> header_4
    





    
    header_2 --> header_5
    





    
    header_3 --> header_6
    





    
    header_4 --> header_7
    





    
    header_5 --> header_3
    





    
    header_6 --> header_2
    





    
    header_7 --> header_1
    







    


    











以上就是用Javascript实现锚点(Anchor)间平滑跳转的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程