首页 > 其他分享> 文章详细

移动端返回顶部

2022-04-24 09:34:36 阅读：216 来源： 互联网

标签：返回顶部 goBack display window nav 移动 scroll

实现功能：

页面滚动某个地方就显示，否则隐藏
点击可以返回顶部

下面详细地说明具体的实现步骤：

① 滚动到某个地方后显示

② 事件：使用scroll页面滚动事件

③ 如果被卷去的头部（window.pageYOffset）大于某个数值

④ 点击返回顶部的图片，使用window.scroll(0, 0)返回顶部

/* 返回顶部模块CSS样式 */

.goBack {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 20px;
    width: 38px;
    height: 38px;
    background: url(../images/back.png) no-repeat;
    background-size: 38px 38px;
}

<!-- 返回顶部模块 -->
<div class="goBack"></div>
<!-- 顶部搜索模块 start -->
<script>
    // 返回顶部模块制作
    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);
    });
</script>

<div class="goBack"></div><script> // 返回顶部模块制作 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); });</script>

标签：返回,顶部,goBack,display,window,nav,移动,scroll
来源： https://www.cnblogs.com/0722tian/p/16184393.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

移动端返回顶部