js+css實現回到頂部按鈕（backtotop）_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 20:51:40

js+css實現回到頂部按鈕（backtotop）_javascript技巧

js+css實現回到頂部按鈕（backtotop）_javascript技巧:本文實例介紹了js+css實現回到頂部按鈕的方法，分享給大家供大家參考，具體內容如下效果 html css p#back-to-top{ position:fixed; bottom:100px; right:80px; } p#back-to-top a{ text-align:center; tex

推薦度：

點擊下載本文 文檔為doc格式

導讀js+css實現回到頂部按鈕（backtotop）_javascript技巧:本文實例介紹了js+css實現回到頂部按鈕的方法，分享給大家供大家參考，具體內容如下效果 html css p#back-to-top{ position:fixed; bottom:100px; right:80px; } p#back-to-top a{ text-align:center; tex

本文實例介紹了js+css實現回到頂部按鈕的方法，分享給大家供大家參考，具體內容如下

效果

html

css

p#back-to-top{
 position:fixed;
 bottom:100px;
 right:80px;
}
p#back-to-top a{
 text-align:center;
 text-decoration:none;
 color:#d1d1d1;
 display:block;
 width:30px;
 /*使用CSS3中的transition屬性給跳轉鏈接中的文字添加漸變效果*/
 -moz-transition:color1s;
 -webkit-transition:color1s;
 -o-transition:color1s;
}
p#back-to-top a:hover{
 color:#979797;
}
p#back-to-top a span{
 background:#d1d1d1 url(../images/arrow_up.png) no-repeat center center;
 border-radius:6px;
 display:block;
 height:30px;
 width:30px;
 margin-bottom:5px;
 /*使用CSS3中的transition屬性給標簽背景顏色添加漸變效果*/
 -moz-transition:background1s;
 -webkit-transition:background1s;
 -o-transition:background1s;
}
#back-to-top a:hover span{
 background:#979797 url(../images/arrow_up.png) no-repeat center center;
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com