溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
下面是使用jQuery實現的“返回頂部”的完整代碼，可以點擊這里體驗效果：http://www.keleyi.com/keleyi/phtml/gototop.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>返回頂部完整代碼 - 柯樂義</title> <meta name="keywords" content="柯樂義,www.keleyi.com,返回頂部完整代碼"/> <meta name="description" content="柯樂義,keleyi.com,返回頂部完整代碼" /> <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.8.2.min.js"></script> <style type="text/css"> /*returnTop*/ p#back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } p#back-to-top a{ text-align:center; text-decoration:none; color:#000; display:block; width:64px; /*使用CSS3中的transition屬性給跳轉鏈接中的文字添加漸變效果*/ -moz-transition:color 1s; -webkit-transition:color 1s; -o-transition:color 1s; } p#back-to-top a:hover{ color:#979797; } p#back-to-top a span{ background:transparent url('https://cache.yisu.com/upload/information/20200311/55/214465.jpg') no-repeat -10px 15px; display:block; height:90px; width:90px; margin-bottom:5px; /*使用CSS3中的transition屬性給<span>標簽背景顏色添加漸變效果*/ -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s; } #back-to-top a:hover span{ background:transparent url('https://cache.yisu.com/upload/information/20200311/55/214465.jpg') no-repeat -10px 18px; } </style> </head> <body> <p id="back-to-top"><a href="#top"><span></span>返回頂部</a></p> <div style="background-color:#959822; width:100%;height:150px;">請滾動鼠標使頁面向下</div> <div style="background-color:Green; width:100%;height:150px;">www.keleyi.com</div> <div style="background-color:Red; width:100%;height:150px;">歡迎</div> <div style="background-color:Yellow; width:100%;height:150px;">hi</div> <div style="background-color:Silver; width:100%;height:150px;">柯樂義</div> <div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div> <div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div> <div style="background-color:Green; width:100%;height:150px;">keleyi.com</div> <div style="background-color:Blue; width:100%;height:150px;">柯樂義</div> <div style="background-color:Olive; width:100%;height:150px;">柯樂義 返回頂部</div> <div style="background-color:Green; width:100%;height:150px;">A</div> <div style="background-color:Purple; width:100%;height:150px;">jquery</div> <div style="background-color:Green; width:100%;height:150px;">B</div> <div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div> <div style="background-color:Orange; width:100%;height:150px;">完整代碼</div> <script type="text/javascript"> $(function () { //當滾動條的位置處于距頂部100像素以下時，跳轉鏈接出現，否則消失 $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#back-to-top").fadeIn(100); } else { $("#back-to-top").fadeOut(100); } }); //當點擊跳轉鏈接后，回到頁面頂部位置 keleyi.com $("#back-to-top").click(function () { $('body,html').animate({ scrollTop: 0 }, 0); return false; }); }); }); </script> </body> </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
