返回顶部操作解析

在页面中有点击回到页面顶部效果

我们新建一个div 命名为backTop

用jQuery设置效果

$('#backTop').on('click', () => {
    $('html,body').animate({scrollTop: '0px'}, 300)
})

也可以给他设置hover事件样式，加个动画样式

$('#backTop').hover(() => {
    $("#backTop").fadeTo("slow", 0.3)
}, () => {
    $("#backTop").fadeTo("slow", 1)
})

 

我们浏览网页时发现有时滑动页面到下面就会出现回到顶部按钮

在页面上部就会隐藏于是我们可以是设置一个定时器来判断此时的位置

要是再上面就隐藏在下面就出现

setInterval(() => {
    if (document.documentElement.scrollTop > 50) {//document.documentElement.scrollTop获取当前滚动条纵坐标
        $("#backTop").slideDown()  //向上滑动方式 将段落隐藏
    } else {
        $("#backTop").slideUp()  //向上滑动方式 将段落隐藏
    }
}, (300))