HTML——用jQuery实现一键返回顶部

发布时间 2023-07-07 15:11:45作者: miriz

HTML部分可自行设计

特点:本次设计因为项目需要,标签在用户面前应出现于向下滚动页面一段高度后再显示,所以,滚动窗口监听事件后,需要设置下拉网页高度,在设置时需要注意,高度不该带有单位(例如:px,em等),

在达到指定高度时,该标签出现

代码如下:

 let totop = document.querySelector('.totop')
    // 页面滚动窗口监听事件
    window.onscroll = function () {
        // 获取浏览器卷去的高度
        let high = document.documentElement.scrollTop || document.body.scrollTop
        if (high >= 200) {
            totop.style.display = 'block'
        } else {
            totop.style.display = 'none'
        }
    }
    totop.addEventListener('click', () => {
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
    })
    //回到顶部