JavaScript溫故：制作一個(gè)backtotop按鈕

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

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

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

    ↑
    Try Scroll Down

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

    position:fixed;

而屬性組合：

    bottom: 40px;
    right: 40px;

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

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

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

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

相關(guān)文章

JavaScript 溫故：制作一個(gè)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 評(píng)論0 收藏0
完美實(shí)現(xiàn)一個(gè)“回到頂部”

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

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

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

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

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

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

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

Freelander 2019-08-20 10:24 評(píng)論0 收藏0