-
回到頂部按鈕的CSS定位查看全部
-
window.onscroll=function() {}//當(dāng)滾動(dòng)條發(fā)生滾動(dòng)時(shí)觸發(fā)。 IE識(shí)別document.documentElement.scrollTop 谷歌識(shí)別document.body.scrollTop 各瀏覽器兼容寫法var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; 為窗口添加滾動(dòng)條滾動(dòng)事件 window.onscroll=function(){}; //在滾動(dòng)條發(fā)生滾動(dòng)是觸發(fā) 注意在獲取滾動(dòng)條距離的時(shí)候 谷歌不識(shí)別document.documentElement.scrollTop，必須要加上document.body.scrollTop；即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 這樣才能兼容各個(gè)瀏覽器！ 獲取滾動(dòng)高度： chrome:document.body.scrollTop IE:document.documentElement.scrollTop 舍入： Math.floor() 向下舍入取整 Math.ceil() 向上舍入取整 [ 收起全文 ]查看全部
-
window是一個(gè)窗口類，onscroll是窗口類window的對(duì)象,滾動(dòng)滾動(dòng)條時(shí)觸發(fā)。查看全部
-
// 獲取頁面可視區(qū)的高度 var clientHeight = document . documentElement . clientHeight; // 獲取滾動(dòng)條高度， IE 和 其他主流瀏覽器 var offsetTop = document . documentElement . scrollTop || document . body . scrollTop ; 使用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'; }查看全部
-
頁面加載后觸發(fā)，綁定事件查看全部
-
為什么改成負(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); }查看全部
-
1、點(diǎn)擊之后讓滾動(dòng)條回到頂部： （1）獲取滾動(dòng)條到頂部的距離var disTop = document.documentElement.scrollTop || document.body.scrollTop; （2）設(shè)置定時(shí)器不斷改寫距離數(shù)值document.documentElement.scrollTop = document.body.scrollTop -= 200； 到達(dá)頂部的時(shí)候清除定時(shí)器：if(disTop == 0){ clearInterval(timer); } （3）定義一個(gè)漸變的速度，讓滾動(dòng)平滑些： var iSpeed = Math.ceil(disTop / 5);//Math.ceil()是為了確保滾動(dòng)條已經(jīng)徹底到頂。 document.documentElement.scrollTop = document.body.scrollTop = disTop - iSpeed; 2、滾動(dòng)條距離頂部一定距離時(shí)讓“回到頂部”出現(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動(dòng)查看全部
-
window.onscroll=function() {}//當(dāng)滾動(dòng)條發(fā)生滾動(dòng)時(shí)觸發(fā)。 IE識(shí)別document.documentElement.scrollTop 谷歌識(shí)別document.body.scrollTop 各瀏覽器兼容寫法var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; 為窗口添加滾動(dòng)條滾動(dòng)事件 window.onscroll=function(){}; //在滾動(dòng)條發(fā)生滾動(dòng)是觸發(fā) 注意在獲取滾動(dòng)條距離的時(shí)候 谷歌不識(shí)別document.documentElement.scrollTop，必須要加上document.body.scrollTop；即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 這樣才能兼容各個(gè)瀏覽器！ 獲取滾動(dòng)高度： chrome:document.body.scrollTop IE:document.documentElement.scrollTop 舍入： Math.floor() 向下舍入取整 Math.ceil() 向上舍入取整查看全部
-
固定位置：position:fixed；圖片居中：margin:0 auto; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Javascript 回到頂部效果</title> <!-- <link rel="stylesheet" type="text/css" href="style.css" /> --> <style type="text/css"> #btn { width:40px; height:40px; //固定定位設(shè)置 position:fixed; left:50%; margin-left:610px; bottom:30px; background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat left top; } #btn:hover { background:url(http://img1.sycdn.imooc.com//535e0dc100010e9c00400080.jpg) no-repeat 0 -39px; } .box { width:1190px; //實(shí)現(xiàn)大圖居中 magin:0 auto; } </style> </head> <body> <div class="box"> <img src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" /> </div> <a href="javascript:;" id="btn" title="回到頂部"></a> </body> </html>查看全部
-
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í)背景圖片的上方 position：fixed; left:50%;/頁面居中顯示/ bottom：定值; margin-left:定值；/在居中的基礎(chǔ)上再向右偏離一定的距離/查看全部
-
主要知識(shí)點(diǎn)查看全部
-
錨鏈接 優(yōu)點(diǎn)： 簡(jiǎn)單快速、沒有兼容性問題 缺點(diǎn)： 視覺上不夠直觀，用戶體驗(yàn)不夠好 主要知識(shí)點(diǎn) DOM操作 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ā) 定時(shí)器(動(dòng)態(tài)效果) 1.setInterval() 設(shè)置定時(shí)器，需傳兩個(gè)參數(shù) 2.clearInterval() 關(guān)閉定時(shí)器，需傳1個(gè)參數(shù) 拖動(dòng)是分兩種事件 ,一種是自動(dòng)的定時(shí)器執(zhí)行的 , 還有一種是人鼠標(biāo)執(zhí)行的 ,定時(shí)器一直執(zhí)行的是ostop為true ,所以不執(zhí)行clearInterval動(dòng)作 , 而人拖動(dòng), 也會(huì)觸發(fā)scroll事件 ,這時(shí) ostop就為flase了 就執(zhí)行clearInterval定時(shí)器 加負(fù)號(hào)是因?yàn)閟peed取整的時(shí)候 ,5/6=0.833333;取整為0 ; 也就是最后一次它是執(zhí)行減去0的 . 而加個(gè)負(fù)號(hào), 就是-0.833333取整 ,則是-1的 , 即最后一次至少是減去1的 . window.onscroll 滾動(dòng)條滾動(dòng)時(shí)觸發(fā) document.documentELement.scrollTop 滾動(dòng)條的數(shù)值 可讀寫 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ā)查看全部
-
通過錨鏈接 實(shí)現(xiàn)回到頂部效果<a href="#"></a>回到頂部 <a href="#"></a> a鏈接的href為“#”回到頁面最頂部。 <a href="###"></a>a鏈接的href為“###”沒有跳轉(zhuǎn)查看全部
-
知識(shí)點(diǎn)查看全部
-
知識(shí)點(diǎn)查看全部
舉報(bào)
0/150
提交
取消