當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡
生活随笔
收集整理的這篇文章主要介紹了
一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
回到頁面頂部demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>body {height: 2000px;}#up {position: fixed;bottom: 0;right: 0;width: 100px;height: 100px;background: #c1c1c1;}</style> </head> <body><div id="up"></div><script>window.onload = function (){var oDiv = document.getElementById("up");var timer = null;var bySys = true;//如何檢測用戶拖動了滾動條window.onscroll = function (){if (!bySys) {clearInterval(timer);}bySys = false;}oDiv.onclick = function (){timer = setInterval(function() {var scrollTop = document.documentElement.scrollTop ||document.body.scrollTop;var iSpeed = Math.floor(-scrollTop/8);if (scrollTop === 0) {clearInterval(timer);}bySys = true;document.body.scrollTop = scrollTop + iSpeed;document.documentElement.scrollTop = scrollTop + iSpeed;}, 30);}}</script> </body> </html>阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>#box {width: 100px;height: 200px;background: #000;display: none;}</style> </head> <body><input type="button" value="顯示" id="btn"><div id="box"></div><script>var oBtn = document.getElementById("btn");var oBox = document.getElementById("box");oBtn.onclick = function (ev){var oEvent = ev || event;oBox.style.display = 'block';oEvent.cancelBubble = true; // 阻止事件冒泡 }document.onclick = function (){oBox.style.display = 'none';}</script> </body> </html>?
轉載于:https://www.cnblogs.com/zhongshanblog/p/4649524.html
總結
以上是生活随笔為你收集整理的一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： appconfig文件中的配置节
- 下一篇： JavaScript单线程和浏览器事件循