国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端實(shí)例練習(xí) - 回到頂部

andong777 / 3383人閱讀

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

回到頂部

代碼儲(chǔ)存在Github
效果預(yù)覽

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

效果預(yù)覽

HTML 部分

HTML

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

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() {
        /*延時(shí)上升*/
        var loop = setInterval(function(){
            /*瀏覽器兼容*/
            var body = document.body || document.documentElement;
            body.scrollTop -= 30;
            if(body.scrollTop == 0) {
                clearInterval(loop);
            }
        }, 1);
    }

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

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

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

趕快打開瀏覽器,看看效果吧!

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

參考自w3cschools

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/50580.html

相關(guān)文章

  • 前端實(shí)例練習(xí) - 回到頂部

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

    hedzr 評(píng)論0 收藏0
  • 前端實(shí)例練習(xí) - 回到頂部

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

    王陸寬 評(píng)論0 收藏0
  • 前端實(shí)例練習(xí) - 模態(tài)框

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

    xiaotianyi 評(píng)論0 收藏0
  • 前端實(shí)例練習(xí) - 模態(tài)框

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

    CODING 評(píng)論0 收藏0
  • 前端實(shí)例練習(xí) - 模態(tài)框

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

    caige 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

andong777

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<