原生js与jq如何实现元素的置顶效果

# 原生js与jq如何实现元素的置顶效果

# 快速导航

# 前言

当页面滑动到底部,用户想要回到顶部,为了便于用户体验,往往需要在页面右下角增加一个置顶,回到顶部的操作

那么用原生js与jq分别怎么实现呢

# 原生js实现

当然实现置顶的效果,有很多,最简单的就是,在点击置顶按钮时,设置滚动条距离顶部的值为0就可以了的

document.documentElement.scrollTop = 0

但是这种直接回到顶部,比较生硬,是没有动画的,所以加了个定时器时间,让距离顶部的距离,慢慢的减到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();
        }
    })