JavaScript溫故：制作一個backtotop按鈕

sunnyxd 發(fā)布于2019-08-20 13:51 / 1405人閱讀

摘要：按鈕可以在內(nèi)容滾動時，給用戶一個返回頂部的方便。制作一個按鈕的關(guān)鍵是告訴瀏覽器此元素相對于瀏覽器固定，而不隨著內(nèi)容的滾動而滾動。代碼達(dá)到此效果的方式是使用的特性而屬性組合告訴瀏覽器，固定此元素在相對于右下角的，位置處。

backtotop按鈕可以在內(nèi)容滾動時，給用戶一個返回頂部的方便。制作一個backtotop按鈕的關(guān)鍵是告訴瀏覽器此元素相對于瀏覽器固定，而不隨著內(nèi)容的滾動而滾動。代碼：

    ↑
    Try Scroll Down

達(dá)到此效果的方式是使用css的特性

    position:fixed;

而屬性組合：

    bottom: 40px;
    right: 40px;

告訴瀏覽器，固定此元素在相對于右下角的40px，40px位置處。

GPU云服務(wù)器云服務(wù)器 html生成一個按鈕 javascript按鈕事件 backtotop 怎么制作一個網(wǎng)站

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81271.html

相關(guān)文章

JavaScript 溫故：制作一個sidebar

摘要：是一種常用類型的導(dǎo)航組件，它可從頁面旁側(cè)彈出，覆蓋在正常內(nèi)容上。其內(nèi)有鏈接到和。 sidebar是一種常用類型的導(dǎo)航組件，它可從頁面旁側(cè)彈出，覆蓋在正常內(nèi)容上。假設(shè)你的正常內(nèi)容為： Placeholder Placeholder Placeholder 現(xiàn)在我們可以在內(nèi)容內(nèi)加入sidebar。其內(nèi)有鏈接到Ho...

waruqi 2019-08-20 13:49 評論0 收藏0
完美實(shí)現(xiàn)一個“回到頂部”

摘要：在瀏覽器中，頁面默認(rèn)滾動是在標(biāo)簽上，移動端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個標(biāo)簽上都加上準(zhǔn)確的說，寫在容器元素上，可以讓容器非鼠標(biāo)手勢觸發(fā)的滾動變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動到頁面頂部或某個位置，一般簡單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評論0 收藏0
完美實(shí)現(xiàn)一個“回到頂部”

摘要：在瀏覽器中，頁面默認(rèn)滾動是在標(biāo)簽上，移動端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個標(biāo)簽上都加上準(zhǔn)確的說，寫在容器元素上，可以讓容器非鼠標(biāo)手勢觸發(fā)的滾動變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動到頁面頂部或某個位置，一般簡單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評論0 收藏0
js溫故而知新11(AJAX)——學(xué)習(xí)廖雪峰的js教程

摘要：在回調(diào)函數(shù)中，通常我們只需通過判斷請求是否完成，如果已完成，再根據(jù)判斷是否是一個成功的響應(yīng)。因此我們需要首先在頁面中準(zhǔn)備好回調(diào)函數(shù)當(dāng)前價格最后用函數(shù)觸發(fā)表示本域，也就是瀏覽器當(dāng)前頁面的域。 Asynchronous JavaScript and XML，意思就是用JavaScript執(zhí)行異步網(wǎng)絡(luò)請求。如果仔細(xì)觀察一個Form的提交，你就會發(fā)現(xiàn)，一旦用戶點(diǎn)擊Submit按鈕，表單開始提...

kun_jian 2019-08-20 16:45 評論0 收藏0
溫故js系列（10）-事件event

摘要：當(dāng)用戶選擇文本框或中的一個或多個字符觸發(fā)。當(dāng)文本框或內(nèi)容改變且失去焦點(diǎn)后觸發(fā)。事件對象事件對象就是對象，通過處理函數(shù)傳遞。比如右擊文本框輸入?yún)^(qū)域，會彈出系統(tǒng)菜單點(diǎn)擊超鏈接會跳轉(zhuǎn)到指定頁面點(diǎn)擊提交按鈕會提交數(shù)據(jù)。前端學(xué)習(xí)：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總歡迎提issues斧正：Event JavaScript-事件even...

Freelander 2019-08-20 10:24 評論0 收藏0