移动端返回顶部

实现功能：

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

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

① 滚动到某个地方后显示

② 事件：使用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><!-- 顶部搜索模块 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>