-
//本課程script.js源碼 window.onload = function(){ var obtn = document.getElementById('btn'); //獲取頁面可視區(qū)的高度 var clientHeight=document.documentElement.clientHeight; var timer = null; var isTop = true; window.onscroll = function(){ // alert(clientHeight); var osTop = document.documentElement.scrollTop || document.body.scrollTop ; if (osTop >= clientHeight){ //顯示按鈕 obtn.style.display="block"; }else { //隱藏按鈕 obtn.style.display="none"; } if (!isTop){ clearInterval(timer); } isTop = false; } obtn.onclick = function(){ //設(shè)置定時器 timer = setInterval(function(){ //獲取滾動條距離頂部的高度 var osTop = document.documentElement.scrollTop || document.body.scrollTop ; var ispeed = Math.floor(-osTop / 6); document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed; isTop = true; console.log(osTop -ispeed); if (osTop == 0){ clearInterval(timer); } },30); } }查看全部
-
使用JavaScript實(shí)現(xiàn)“按鈕”的顯示與隱藏 1、隱藏回到頂部按鈕 (1)在樣式表回到頂部按鈕設(shè)置成display:none; 2、獲取頁面可視區(qū)的高度 (1)創(chuàng)建變量，獲取頁面可視區(qū)的高度 var clientHeight=document.documentElement.clientHeight; (2)彈出頁面可視區(qū)高度 alert(clientHeight); (3)顯示回到頂部按鈕，把樣式表中的display先刪除 (4)刷新頁面獲取高度后隱藏 3、增加判斷，在滾動的時候 (1)獲取滾動條距離頂部的高度 var disTop = document.documentElement.scrollTop || document.body.scrollTop; (2)增加判斷，讓按鈕顯示出來 （在樣式表中可以改成display:block;就能顯示，但如何用js顯示） if(osTop>=clientHeight){ obtn.style.display='block';//把樣式表中的display改成block } (3)回到第一屏隱藏 else{ obtn.style.display='none'; }查看全部
-
window是一個窗口類，onscroll是窗口類window的對象,滾動滾動條時觸發(fā)查看全部
-
獲取滾動條位置 兼容IE document.documentElement.scrollTop 兼容Chrome document.body.scrollTop var ostop=document.documentElement.scrollTop||document.body.scrollTop;//同時兼容查看全部
-
//清除定時器查看全部
-
//代碼查看全部
-
//標(biāo)簽獲取和事件綁定是經(jīng)常使用到的 很重要的查看全部
-
body查看全部
-
position:fixed;固定定位查看全部
-
no-repeat背景不平鋪 margin-left:610px;計(jì)算中間到右邊的距離； #btn:hover{}鼠標(biāo)移上去變化 -40px;因?yàn)槎ㄎ辉诒尘皥D片的上半部，-40會移到此時背景圖片的下半部；+40會移動此時背景圖片的上方查看全部
-
href="javascript:;"作用是：阻止瀏覽器默認(rèn)行為；；；若為空，默認(rèn)調(diào)到頂部查看全部
-
回到頂部這個效果的重點(diǎn)在定時器和運(yùn)用事件上查看全部
-
錨鏈接的優(yōu)缺點(diǎn)查看全部
-
錨鏈接返回頂部 <area shape="rect" coords="1,371,116,408" href="#"> 錨鏈接到標(biāo)題 <area href="#08" shape="rect" coords="8,294,125,329">查看全部
-
第二種查看全部
舉報(bào)
0/150
提交
取消