jquery实现平滑移动的锚点定位

  • 内容
  • 评论
  • 相关
不同于传统的锚点定位,Jquery的锚点定位就显得相当友好,体验度也大大地加强了。 先看传统的锚点定位:


<a href="#pos">传统的锚点</a>
<p id="pos">我是锚点定位的内容</p>
锚点定位之后会直接置顶到顶部,此时url会发生变化,后面会多了个#pos,看起来不是那么雅观。
$(function(){
            $('.li').click(function(){
                //offset相对于当前窗口的偏移(与position进行区别)
                $('html,body').animate({scrollTop: ($('.p'+$(this).attr('data-id')).offset().top)},2000);
            })
    })
接着是jquery的锚点定位就显示优雅多了。

值得注意是offset和position的区别,请查阅相关手册。

16154012_Shwu.png

发表评论

电子邮件地址不会被公开。 必填项已用*标注

00:00 / 00:00
顺序播放