-
阻止a標簽?zāi)J效果： <a>中的【href="javascript:;"】：阻止<a>標簽?zāi)J回到頂部的行為。查看全部
-
案例實現(xiàn)主要知識點：查看全部
-
錨鏈接的優(yōu)點和缺點：查看全部
-
錨鏈接： <a href="#">默認回到頂部查看全部
-
錨鏈接： 優(yōu)點：簡單快速、沒有兼容性問題 缺點：視覺上不夠直觀，用戶體驗不夠好查看全部
-
錨鏈接： <a href="#"></a> a鏈接的href為“#”回到頁面最頂部。查看全部
-
1、點擊之后讓滾動條回到頂部： （1）獲取滾動條到頂部的距離var disTop = document.documentElement.scrollTop || document.body.scrollTop; （2）設(shè)置定時器不斷改寫距離數(shù)值document.documentElement.scrollTop = document.body.scrollTop -= 200； 到達頂部的時候清除定時器：if(disTop == 0){ clearInterval(timer); } （3）定義一個漸變的速度，讓滾動平滑些： var iSpeed = Math.ceil(disTop / 5);//Math.ceil()是為了確保滾動條已經(jīng)徹底到頂。 document.documentElement.scrollTop = document.body.scrollTop = disTop - iSpeed; 2、滾動條距離頂部一定距離時讓“回到頂部”出現(xiàn)： window.onscroll = function(){ var disTop = document.documentElement.scrollTop || document.body.scrollTop; if(disTop >= clientHeight){ oBtn.style.display = "block"; }else{ oBtn.style.display = "none"; } } 3、中止?jié)L動查看全部
-
清除定時器的時候要確保滾動條已經(jīng)徹底到達頂部： 將速度設(shè)置為負值。iSpeed = Math.floor(-disTop / 5);查看全部
-
獲取瀏覽器可視區(qū)域的高度：document.documentElement.clientHeight查看全部
-
【獲取滾動條位置】瀏覽器兼容 【IE】 document.documentElement.scrollTop 【Chrome】 document.body.scrollTop查看全部
-
<a>中的【href="javascript:;"】的作用是：阻止<a>標簽的瀏覽器默認行為。查看全部
-
window.onload = function() { var obtn = document.getElementById("btn"); var timer = null; var isTop = true; //滾動條滾動時觸發(fā) window.onscroll = function() { if (!isTop) { clearInterval(timer); } isTop = false; } obtn.onclick = function() { //設(shè)置定時器 timer = setInterval(function() { //獲取滾動條距離頂部的高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.ceil(osTop/5); document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed; isTop = true; console.log(osTop-ispeed); if (osTop == 0) { clearInterval(timer); } },30); } }查看全部
-
document.documentElement.clientHeight 獲取頁面可視區(qū)的高度查看全部
-
谷歌瀏覽器查看綁定的事件在elements-> eventlisteners 獲取滑條距頂端距離 谷歌不支持document.documentElement.scrollTop document.body.scrollTop查看全部
-
JavaScript實現(xiàn)回到頂部查看全部
舉報
0/150
提交
取消