前端實例練習 - 回到頂部

andong777 發(fā)布于2019-08-01 16:32 / 3409人閱讀

摘要：回到頂部代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。

回到頂部

代碼儲存在Github
效果預覽

初衷：很多人在初學前端的時候都會問，“如何入門前端？”
同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的 “入門級” 的教材并不太滿意。學習一門新知識，實例是尤其重要的。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。愿能為大家提供一些幫助。
希望能夠與大家互相分享，共同進步。

效果預覽

HTML 部分


  HTML
  萬維網(wǎng)上的一個超媒體文檔稱之為一個頁面（外語：page）。作為一個組織或者個人在萬維網(wǎng)上放置開始點的頁面稱為主頁（外語：Homepage）或首頁，主頁中通常包括有指向其他相關頁面或其他節(jié)點的指針（超級鏈接），所謂超級鏈接，就是一種統(tǒng)一資源定位器（Uniform Resource Locator，外語縮寫：URL）指針，通過激活（點擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應用的最重要的原因之一。在邏輯上將視為一個整體的一系列頁面的有機集合稱為網(wǎng)站（Website或Site）。超級文本標記語言（英文縮寫：HTML）是為“網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息”設計的一種標記語言。
網(wǎng)頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網(wǎng)關接口、組件等），可以創(chuàng)造出功能強大的網(wǎng)頁。因而，超級文本標記語言是萬維網(wǎng)（Web）編程的基礎，也就是說萬維網(wǎng)是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

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);
    }

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

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

好啦，現(xiàn)在所有的代碼都寫完啦！

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

在這里，只是給大家提供一種思路，參考。
具體的實現(xiàn)，每個人都可以有不同的方法。
請大家趕快發(fā)揮想象，把你最想實現(xiàn)的功能，在電腦敲出來吧！

參考自w3cschools

GPU云服務器云服務器回到頂部網(wǎng)頁回到頂部回到頂部按鈕 html 回到頂部

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/50580.html

前端實例練習 - 回到頂部

摘要：回到頂部代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。回到頂部代碼儲存在Github效果預覽初衷：很多人在初學前端的時候都會問，如何入門前端？同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材...

hedzr 2019-08-29 12:12 評論0 收藏0
前端實例練習 - 回到頂部

摘要：回到頂部代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。回到頂部代碼儲存在Github效果預覽初衷：很多人在初學前端的時候都會問，如何入門前端？同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材...

王陸寬 2019-08-20 15:07 評論0 收藏0
前端實例練習 - 模態(tài)框

摘要：模態(tài)框代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。模態(tài)框代碼儲存在Github效果預覽初衷：很多人在初學前端的時候都會問，如何入門前端？同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不...

xiaotianyi 2019-08-21 11:37 評論0 收藏0
前端實例練習 - 模態(tài)框

摘要：模態(tài)框代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。模態(tài)框代碼儲存在Github效果預覽初衷：很多人在初學前端的時候都會問，如何入門前端？同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不...

CODING 2019-08-29 12:11 評論0 收藏0
前端實例練習 - 模態(tài)框

摘要：模態(tài)框代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現(xiàn)的具體實例。模態(tài)框代碼儲存在Github效果預覽初衷：很多人在初學前端的時候都會問，如何入門前端？同為在前端學習道路上，奮力追趕的一員，本人對于目前網(wǎng)絡上所能看到的入門級的教材并不...

caige 2019-08-01 16:28 評論0 收藏0