移动端返回顶部

原创于 2025-03-17 12:36:59 发布 · 180 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #css

javascript 专栏收录该内容

34 篇文章

订阅专栏

题目： 移动端返回顶部

作用： 向下拖动一段距离后会出现一个“返回顶部”的小按钮，按下后可以返回顶部

分析：

滚动某个地方显示
事件： scroll 页面滚动事件
如果被卷去的头部（window.pageYOffset ）大于某个数值
点击， window.scroll(0,0) 返回顶部

效果：
移动端返回顶部

代码如下：

window.addEventListener('load', function() {
    // 返回顶部模块制作
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function() {
        if (window.pageYOffset >= nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click', function() {
        window.scroll(0, 0);
    })
})

移动端轮播图