平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 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
gongzhonghao
关注“小K前端杂谈”,得到更多学习资源