您好,歡迎來到網暖!
?
當前位置:網暖 » 站長資訊 » 建站基礎 » 網絡技術 » 文章詳細 訂閱RssFeed

web前端入門到實戰:HTML DOM 事件(實現一個簡單的回到頂部功能)

來源:網絡整理 瀏覽:277次 時間:2019-12-04

HTML DOM 事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。事件通常與函數結合使用,函數不會在事件發生前被執行! (如用戶點擊按鈕)。

web前端入門到實戰:HTML DOM 事件(實現一個簡單的回到頂部功能)

利用onscroll事件寫一個回到頂部功能,代碼如下:

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <meta http-equiv="X-UA-Compatible" content="ie=edge" />    <title>Document</title>    <style>        *{margin: 0;padding: 0;}            #mybtn{position: fixed;height: 40px;width: 100px;background: red;border: none;border-radius: 5px;right: 20px;bottom: 20px;cursor: pointer;display: none;}            #mybtn:hover{background-color: #888888;color: #FFFFFF;}        </style></head><body>    <button id="mybtn" onclick="topfunction()" title="返回頂部">返回頂部</button>    <div style="height: 100px;background-color: #000000;color: #FFFFFF;font-size: 50px;text-align: center;line-height: 100px;">向下滑動</div>    <div style="background-color: lightgray;padding: 30px  30px 2500px;text-align: center;font-size: 30px;">實現返回頂部功能</div></body>    <script>        //瀏覽器窗口執行        window.onscroll = function(){            changeScroll();        }        //改變滾動距離         function changeScroll(){            if(document.body.scrollTop >20 || document.documentElement.scrollTop >20){                document.getElementById("mybtn").style.display = "block";            }else{                document.getElementById("mybtn").style.display = "none";            }        }        function topfunction(){            var timer = setInterval(function(){                document.body.scrollTop -= 20;                document.documentElement.scrollTop -=20;                if(document.body.scrollTop ==0 && document.documentElement.scrollTop ==0){                    clearInterval(timer);                }            },30)        }    </script></html>web前端開發學習Q-q-u-n: 784-783-012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端項目實戰教學視頻,PDF)

效果如下:

web前端入門到實戰:HTML DOM 事件(實現一個簡單的回到頂部功能)

推薦站點

  • 騰訊騰訊

    騰訊網(www.QQ.com)是中國瀏覽量最大的中文門戶網站,是騰訊公司推出的集新聞信息、互動社區、娛樂產品和基礎服務為一體的大型綜合門戶網站。騰訊網服務于全球華人用戶,致力成為最具傳播力和互動性,權威、主流、時尚的互聯網媒體平臺。通過強大的實時新聞和全面深入的信息資訊服務,為中國數以億計的互聯網用戶提供富有創意的網上新生活。

    www.qq.com
  • 搜狐搜狐

    搜狐網是全球最大的中文門戶網站,為用戶提供24小時不間斷的最新資訊,及搜索、郵件等網絡服務。內容包括全球熱點事件、突發新聞、時事評論、熱播影視劇、體育賽事、行業動態、生活服務信息,以及論壇、博客、微博、我的搜狐等互動空間。

    www.sohu.com
  • 網易網易

    網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。

    www.163.com
  • 新浪新浪

    新浪網為全球用戶24小時提供全面及時的中文資訊,內容覆蓋國內外突發新聞事件、體壇賽事、娛樂時尚、產業資訊、實用信息等,設有新聞、體育、娛樂、財經、科技、房產、汽車等30多個內容頻道,同時開設博客、視頻、論壇等自由互動交流空間。

    www.sina.com.cn
  • 百度一下百度一下

    百度一下,你就知道

    www.baidu.com
?
买北京单场