課程
/前端開發(fā)
/HTML/CSS
/回到頂部效果
IE7和IE8不兼容怎么解決?
2016-11-14
源自:回到頂部效果 4-1
正在回答
<script type="text/javascript">
window.onload=function(){
var obtn=document.getElementById("btn");
//獲取頁(yè)面的可視區(qū)域的高度
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
var timer=null;
var isTop=true;
obtn.onclick=function(){
if(timer){
clearInterval(timer);//開始定時(shí)器之前先清除定時(shí)器
}
//開啟定時(shí)器
timer=setInterval(function(){
var osTop=document.documentElement.scrollTop||document.body.scrollTop;
var ispeed=Math.floor(-osTop/6);///速度由快到慢
isTop=true;
document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed;
console.log(osTop);
//滾動(dòng)到頂部清除定時(shí)器
if(osTop==0){
clearInterval(timer);
},20);
window.onscroll=function(){
if(osTop>=clientHeight){
obtn.style.display="block";
}else{
obtn.style.display="none";
//解決用戶頁(yè)面滾動(dòng)到頂部過程中不想返回頂部,直接拖動(dòng)滾動(dòng)條到瀏覽的地方
if(!isTop){
isTop=false;
</script>
已解決
鏡子里的你i
illa 提問者 回復(fù) 鏡子里的你i
舉報(bào)
回到頂部網(wǎng)站不可缺少的一部分,用JS實(shí)現(xiàn)炫酷拉風(fēng)的回到頂部效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-12-28
<script type="text/javascript">
window.onload=function(){
var obtn=document.getElementById("btn");
//獲取頁(yè)面的可視區(qū)域的高度
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
var timer=null;
var isTop=true;
obtn.onclick=function(){
if(timer){
clearInterval(timer);//開始定時(shí)器之前先清除定時(shí)器
}
//開啟定時(shí)器
timer=setInterval(function(){
var osTop=document.documentElement.scrollTop||document.body.scrollTop;
var ispeed=Math.floor(-osTop/6);///速度由快到慢
isTop=true;
document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed;
console.log(osTop);
//滾動(dòng)到頂部清除定時(shí)器
if(osTop==0){
clearInterval(timer);
}
},20);
}
window.onscroll=function(){
var osTop=document.documentElement.scrollTop||document.body.scrollTop;
if(osTop>=clientHeight){
obtn.style.display="block";
}else{
obtn.style.display="none";
}
//解決用戶頁(yè)面滾動(dòng)到頂部過程中不想返回頂部,直接拖動(dòng)滾動(dòng)條到瀏覽的地方
if(!isTop){
clearInterval(timer);
}
isTop=false;
}
}
</script>
2016-11-15
已解決