前端實例練習 - 回到頂部

回到頂部

代碼儲存在Github
效果預覽

初衷：不少人在初學前端的時候都會問，「如何入門前端？」
同爲在前端學習道路上，奮力追趕的一員，本人對於目前網絡上所能看到的 「入門級」 的教材並不太滿意。學習一門新知識，實例是尤爲重要的。在這裏本人整理了目前頁面上常見功能實現的具體實例。願能爲你們提供一些幫助。
但願可以與你們互相分享，共同進步。

效果預覽

HTML 部分

<div class="container">
  <h1>HTML</h1>
  <p>萬維網上的一個超媒體文檔稱之爲一個頁面（外語：page）。做爲一個組織或者我的在萬維網上放置開始點的頁面稱爲主頁（外語：Homepage）或首頁，主頁中一般包括有指向其餘相關頁面或其餘節點的指針（超級連接），所謂超級連接，就是一種統一資源定位器（Uniform Resource Locator，外語縮寫：URL）指針，經過激活（點擊）它，可以使瀏覽器方便地獲取新的網頁。這也是HTML得到普遍應用的最重要的緣由之一。在邏輯上將視爲一個總體的一系列頁面的有機集合稱爲網站（Website或Site）。超級文本標記語言（英文縮寫：HTML）是爲「網頁建立和其它可在網頁瀏覽器中看到的信息」設計的一種標記語言。
網頁的本質就是超級文本標記語言，經過結合使用其餘的Web技術（如：腳本語言、公共網關接口、組件等），能夠創造出功能強大的網頁。於是，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是創建在超文本基礎之上的。超級文本標記語言之因此稱爲超文本標記語言，是由於文本中包含了所謂「超級連接」點。</p>
<button id="myBtn" title="返回頂部">返回頂部</button>
</div>

CSS 部分

.container {
    width: 60%;
    margin: 0 auto;
    height: 5000px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  animation: 0.8s fade; 
}

@keyframes fade {
    from {opacity: 0};
    to {opacity: 1};
}

#myBtn:hover {
  background-color: #555;
}

JavaScript 部分

(function() {
    var myBtn = document.getElementById("myBtn");
    
    /*判斷滾輪位置*/
    function scrollCheck() {
        if(document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    function goToTop() {
        /*延時上升*/
        var loop = setInterval(function(){
            /*瀏覽器兼容*/
            var body = document.body || document.documentElement;
            body.scrollTop -= 30;
            if(body.scrollTop == 0) {
                clearInterval(loop);
            }
        }, 1);
    }

    /*滾動時執行*/
    window.onscroll = function() {
        scrollCheck();
    }

    myBtn.onclick = function() {
        goToTop();
    }
})();

---

好啦，如今全部的代碼都寫完啦！

趕快打開瀏覽器，看看效果吧！

在這裏，只是給你們提供一種思路，參考。
具體的實現，每一個人均可以有不一樣的方法。
請你們趕快發揮想象，把你最想實現的功能，在電腦敲出來吧！

參考自w3cschools