# 原生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

使用jq就是这么简单,也无需考虑兼容性,但是单单为一个效果,引入一个jq库,未免有些大才小用,所以,具体的话,在实际中,还需权衡,不引入jq库,那么就得用原生js去写,相比代码多了点,而使用jq,就是写得更少,做得更多,从代码量就看出来了的

白色

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐