-
<a href="javascript:;"></a> href="javascript:;" 作用是：阻止瀏覽器默認(rèn)行為；若為空或#，默認(rèn)返回到頂部查看全部
-
window.onscroll 滾動(dòng)條滾動(dòng)時(shí)觸發(fā) document.documentELement.scrollTop 滾動(dòng)條的數(shù)值 可讀寫查看全部
-
設(shè)置鏈接href的值為#，默認(rèn)返回頂部查看全部
-
使用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、增加判斷，在滾動(dòng)的時(shí)候 (1)獲取滾動(dòng)條距離頂部的高度 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'; }查看全部
-
position:fixed; margin:0 auto;查看全部
-
href="javascript:;"作用是：阻止瀏覽器默認(rèn)行為；；；若為空，默認(rèn)調(diào)到頂部 no-repeat背景不平鋪 margin-left:610px;計(jì)算中間到右邊的距離； #btn:hover{}鼠標(biāo)移上去變化 -40px;因?yàn)槎ㄎ辉诒尘皥D片的上半部，-40會(huì)移到此時(shí)背景圖片的下半部；+40會(huì)移動(dòng)此時(shí)背景圖片的上方查看全部
-
主要知識(shí)點(diǎn)： 1.document.getElementById 根據(jù)ID標(biāo)簽獲取元素 2.document.documentELement.scrollTop 滾動(dòng)條的數(shù)值 可讀寫 事件運(yùn)用： 1.window.onload 頁面加載完畢后觸發(fā) 2.onclick 點(diǎn)擊后觸發(fā) 3.window.onscroll 滾動(dòng)條滾動(dòng)時(shí)觸發(fā)查看全部
-
http://img1.sycdn.imooc.com//55c713610001c93412800720-156-88.jpg查看全部
-
window是一個(gè)窗口類，onscroll是窗口類window的對(duì)象,滾動(dòng)滾動(dòng)條時(shí)觸發(fā)。查看全部
-
滾動(dòng)中時(shí)用戶移動(dòng)滾輪的事件處理 window.onload=function(){ var obtn = document.getElementById("btn"); var timer = null; var isTop = true; //用戶暫停滾動(dòng)，這個(gè)函數(shù)還需要理解 window.onscroll = function(){ if(!isTop){ clearInterval(timer); } isTop = false; } obtn.onclick=function(){ timer = setInterval(function(){ var osTop= document.documentElement.scrollTop || document.body.scrollTop; var speed =Math.ceil(osTop/5); document.documentElement.scrollTop = document.body.scrollTop = osTop-speed; //執(zhí)行計(jì)時(shí)器時(shí)把isTop設(shè)置為true isTop = true; if(osTop == 0){ clearInterval(timer); } },30); }; };查看全部
-
為什么改成負(fù)的就能滾到頭？ 回答這個(gè)問題前，先來看下為什么不改成負(fù)數(shù)就不行呢？ 注意這句：var ispeed = Math.floor(osTop / 6); 當(dāng)上面osTop的值小于6這個(gè)除數(shù)時(shí)，ispeed的值始終等于0（向下取整了），所以問題來了，當(dāng)ispeed的值不變時(shí)，osTop - ispeed 這個(gè)控制滾動(dòng)條的值也就不變了，所以滾動(dòng)條永遠(yuǎn)到不了頂。 實(shí)際中，當(dāng)osTop = 5 時(shí)，ispeed 為 0，下面兩句也始終為5： document.documentElement.scrollTop = osTop - ispeed; // 兼容IE document.body.scrollTop = osTop - ispeed; // 兼容FF、Chrome 所以滾動(dòng)條一直停在距離頂部5px的地方。 OK，那為什么改成負(fù)數(shù)就行了呢？其實(shí)改負(fù)數(shù)的目的就是讓ispeed的值不為0. 實(shí)際中，當(dāng)osTop = 5（或小于5時(shí)），Math.floor(osTop / 6) 的值為 -1，這樣就使得 osTop + ispeed 的值始終能減小下去，直至到0. 這種用負(fù)數(shù)的方法不好理解，我是采用Math.ceil()這個(gè)方法（向上取整）實(shí)現(xiàn)的，代碼如下： obtn.onclick = function(){ // 定時(shí)器開啟 timer = setInterval(function(){ // 獲取當(dāng)前滾動(dòng)條距離頂部距離 var osTop = document.documentElement.scrollTop || document.body.scrollTop; var ispeed = Math.ceil(osTop / 6); document.documentElement.scrollTop = osTop - ispeed; document.body.scrollTop = osTop - ispeed; if(osTop == 0){ clearInterval(timer); } },30); }查看全部
-
獲取滾動(dòng)條滾動(dòng)的高度（兼容性處理）： var osTop = document.documentElement.scrollTop || document.body.scrollTop;查看全部
-
href="javascript:;"作用是：阻止瀏覽器默認(rèn)行為；；；若為空，默認(rèn)調(diào)到頂部 background:url(img) no-repeat left top; no-repeat背景不平鋪；水平位置左對(duì)齊，垂直方式頂對(duì)齊（雪碧圖效果） margin-left:610px;計(jì)算中間到右邊的距離； #btn:hover{}鼠標(biāo)移上去變化 background:url(img) no-repeat left -40px;（雪碧圖效果，background-position：0 -40px） -40px;因?yàn)槎ㄎ辉诒尘皥D片的上半部，-40會(huì)移到此時(shí)背景圖片的下半部；+40會(huì)移動(dòng)此時(shí)背景圖片的上方查看全部
-
不錯(cuò)值得一學(xué)。查看全部
-
獲取滾動(dòng)條的高度：var osTop(兼容性處理)=document.documentElement.scrollTop||document.body.scrollTop;查看全部
舉報(bào)
0/150
提交
取消