Jquery网页内锚点跳转滑动缓冲导航的方法代码

  • A+

Jquery网页内锚点跳转滑动缓冲导航的方法代码平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”。

jQuery(function($) {    
    $("#elementid").click(function() {    
        $("html, body").animate({    
            scrollTop: $($(this).attr("href")).offset().top + "px"    
        }, 1500);    
        return false;    
    });    
});
其中#elementid为选取对象的id值
$("html,body")代表对html或body元素进行动画,即要改变他们的css属性值
animate()方法用来实现一组css的自定义动画
scrollTop是要改变的属性值,表示滚动条滑过的距离,在这里表示向下拉动浏览器滚动条后html(body)被浏览器顶端隐藏的高度
$("#elementid").offset().top就是html(body)需要被浏览器顶端隐藏的高度,它代表id为elementid的元素顶端到网页顶端(不是浏览器可视区域顶端)的绝对距离。
1500代表时间1.5s
weinxin
我的微信
这是我的微信扫一扫
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: