-
//本課程script.js源碼 window.onload = function(){ var obtn = document.getElementById('btn'); //獲取頁面可視區的高度 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(){ //設置定時器 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實現“按鈕”的顯示與隱藏 1、隱藏回到頂部按鈕 (1)在樣式表回到頂部按鈕設置成display:none; 2、獲取頁面可視區的高度 (1)創建變量，獲取頁面可視區的高度 var clientHeight=document.documentElement.clientHeight; (2)彈出頁面可視區高度 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的對象,滾動滾動條時觸發查看全部
-
獲取滾動條位置 兼容IE document.documentElement.scrollTop 兼容Chrome document.body.scrollTop var ostop=document.documentElement.scrollTop||document.body.scrollTop;//同時兼容查看全部
-
//清除定時器查看全部
-
//代碼查看全部
-
//標簽獲取和事件綁定是經常使用到的 很重要的查看全部
-
body查看全部
-
position:fixed;固定定位查看全部
-
no-repeat背景不平鋪 margin-left:610px;計算中間到右邊的距離； #btn:hover{}鼠標移上去變化 -40px;因為定位在背景圖片的上半部，-40會移到此時背景圖片的下半部；+40會移動此時背景圖片的上方查看全部
-
href="javascript:;"作用是：阻止瀏覽器默認行為；；；若為空，默認調到頂部查看全部
-
回到頂部這個效果的重點在定時器和運用事件上查看全部
-
錨鏈接的優缺點查看全部
-
錨鏈接返回頂部 <area shape="rect" coords="1,371,116,408" href="#"> 錨鏈接到標題 <area href="#08" shape="rect" coords="8,294,125,329">查看全部
-
第二種查看全部
舉報
0/150
提交
取消