1.第一種方式：錨鏈接
<a href='#dd'></a>
<div id="dd"></div>
優(yōu)點(diǎn)：簡(jiǎn)單快速，沒(méi)有兼容性問(wèn)題
缺點(diǎn)：
視覺(jué)上不夠直觀处坪，用戶(hù)體驗(yàn)不太好
2.js的方式：
DOM:
document.getElementById?
2.事件運(yùn)用：
window.onload頁(yè)面加載完后觸發(fā)
onclick點(diǎn)擊后觸發(fā)
window.onscroll---滾動(dòng)條滾動(dòng)時(shí)觸發(fā)
3.定時(shí)器--動(dòng)態(tài)的效果用定時(shí)器
setInterval()
clearInterval();
小隨知識(shí)：
href="javascript:;"作用是：阻止瀏覽器默認(rèn)行為田度；勉耀；陪汽；若為空昧谊，默認(rèn)調(diào)到頂部
window.onscroll=function() {}//當(dāng)滾動(dòng)條發(fā)生滾動(dòng)時(shí)觸發(fā)凤价。
IE識(shí)別document.documentElement.scrollTop
谷歌識(shí)別document.body.scrollTop
各瀏覽器兼容寫(xiě)法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
步驟：
1富蓄、點(diǎn)擊之后讓滾動(dòng)條回到頂部：
（1）獲取滾動(dòng)條到頂部的距離var disTop = document.documentElement.scrollTop || document.body.scrollTop;
（2）設(shè)置定時(shí)器不斷改寫(xiě)距離數(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)
// 獲取頁(yè)面可視區(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君珠、獲取頁(yè)面可視區(qū)的高度
(1)創(chuàng)建變量寝志，獲取頁(yè)面可視區(qū)的高度
var clientHeight=document.documentElement.clientHeight;
(2)彈出頁(yè)面可視區(qū)高度
alert(clientHeight);
(3)顯示回到頂部按鈕，把樣式表中的display先刪除
(4)刷新頁(yè)面獲取高度后隱藏
3策添、增加判斷澈段，在滾動(dòng)的時(shí)候
(1)獲取滾動(dòng)條距離頂部的高度
var disTop = document.documentElement.scrollTop || document.body.scrollTop;
(2)增加判斷，讓按鈕顯示出來(lái)
（在樣式表中可以改成display:block;就能顯示舰攒，但如何用js顯示）
if(osTop>=clientHeight){
obtn.style.display='block';//把樣式表中的display改成block
}
(3)回到第一屏隱藏
else{
obtn.style.display='none';
}
function backTop(){
var btn=document.getElementById("btn");
var timer=null;
//獲取頁(yè)面可視區(qū)的高度
var clientHeight=document.documentElement.clientHeight;
var isTop=true;
window.onscroll=function(){
var oTop=document.body.scrollTop||document.documentElement.scrollTop;
if(oTop>= clientHeight){
btn.style.display='block';
}else{
btn.style.display='none';
}
if(!isTop){
clearInterval(time);
}
isTop=false;
}
btn.onclick=function(){
timer=setInterval(function(
){//獲取滾動(dòng)條距離底部的高度
var oTop=document.body.scrollTop||document.documentElement.scrollTop;
var speed=speed>0?Math.ceil(oTop/5):Math.floor(oTop/5);
document.documentElement.scrollTop=document.body.scrollTop=oTop-speed;
isTop=true;
if(oTop===0){
clearInterval(timer);
}
},30);
}
