案例：移動端返回頂部效果

實現功能：

• 頁面滾動某個地方就顯示，否則隱藏
• 點擊可以返回頂部

下面詳細地說明具體的實現步驟：

① 滾動到某個地方后顯示

② 事件：使用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>