# 原生js与jq如何实现元素的置顶效果
# 快速导航
# 前言
当页面滑动到底部,用户想要回到顶部,为了便于用户体验,往往需要在页面右下角增加一个置顶,回到顶部的操作
那么用原生js与jq分别怎么实现呢
# 原生js实现
当然实现置顶的效果,有很多,最简单的就是,在点击置顶按钮时,设置滚动条距离顶部的值为0就可以了的
document.documentElement.scrollTop = 0
1
但是这种直接回到顶部,比较生硬,是没有动画的,所以加了个定时器时间,让距离顶部的距离,慢慢的减到0,就实现动画了的
# jQ实现元素置顶
用jq
的话,就几行代码搞定
// 置顶操作
$('#btn').click(function() {
$("html,body").animate({scrollTop: 0})
})
// 为窗口绑定scroll事件处理函数
$(window).scroll(function() {
// 获取窗口滚动滚动条垂直位置
var s = $(window).scrollTop()
// 当滚动大于100时,显示置顶按钮
if(s > 100) {
$("#btn").fadeIn();
}else {
$("#btn").fadeOut();
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用jq
就是这么简单,也无需考虑兼容性,但是单单为一个效果,引入一个jq
库,未免有些大才小用,所以,具体的话,在实际中,还需权衡,不引入jq
库,那么就得用原生js
去写,相比代码多了点,而使用jq
,就是写得更少,做得更多,从代码量就看出来了的
分享
留言
解答
收藏