                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /回到頂部效果

為什么這個(gè) ”點(diǎn)擊回到頂部按鈕后滑動(dòng)滑輪的效果“ 在 IE可以在chrom 里不行

window.onload = function(){

var hiee = document.documentElement.clientHeight;

var timer=null;

var btn = document.getElementById("btn");

var isT = true;

window.onscroll = function(){

var ttop = document.documentElement.scrollTop || document.body.scrollTop;

if(ttop >= hiee){

btn.style.display= "block";

}else{

btn.style.display= "none";

}

if(!isT){

clearInterval(timer);

}

isT = false;

}

btn.onclick = function(){

timer = setInterval(function(){

var ttop = document.documentElement.scrollTop||document.body.scrollTop;

var ispeed = Math.floor(-ttop / 6);

document.documentElement.scrollTop = document.body.scrollTop = ispeed +ttop;

//document.documentElement.scrollTop = document.body.scrollTop = ttop - ttop/50;

// = function(){clearInterval(timer)}

isT = true;

if( ttop == 0){

clearInterval(timer)

}

},10)

}

qq_e累_0

2015-11-27

源自：回到頂部效果 4-4

關(guān)注問(wèn)題我要回答

1699

操作

收起

3 回答

weibo_哆啦A夢(mèng)有大口袋_0
2015-12-31

看看是不是沒(méi)有空格的原因

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

echo_kinchao
2015-11-28

是不是有瀏覽器兼容問(wèn)題

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

qq_e累_0 提問(wèn)者

對(duì) 有

2015-11-28 回復(fù) 有任何疑惑可以回復(fù)我~

李曉健
2015-11-27

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
?#btn?{
?width:40px;
?height:40px;
?position:fixed;
?left:50%;
?display:none;
?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;
?margin: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>
<script>
?window.onload?=?function?()?{
?var?hiee?=?document.documentElement.clientHeight;
?var?timer?=?null;
?var?btn?=?document.getElementById("btn");
?var?isT?=?true;
?window.onscroll?=?function?()?{
?var?ttop?=?document.documentElement.scrollTop?||?document.body.scrollTop;
?if?(ttop?>=?hiee)?{
?btn.style.display?=?"block";
????????????}?else?{
?btn.style.display?=?"none";
????????????}
?if?(!isT)?{
?clearInterval(timer);
????????????}
?isT?=?false;
????????}
?btn.onclick?=?function?()?{
?timer?=?setInterval(function?()?{
?var?ttop?=?document.documentElement.scrollTop?||?document.body.scrollTop;
?var?ispeed?=?Math.floor(-ttop?/?6);
?document.documentElement.scrollTop?=?document.body.scrollTop?=?ispeed?+?ttop;
//document.documentElement.scrollTop?=?document.body.scrollTop?=?ttop?-?ttop/50;
//?=?function(){clearInterval(timer)}
?isT?=?true;
?if?(ttop?==?0)?{
?clearInterval(timer)
????????????????}
????????????},?10)
????????}
????}
</script>
</body>
</html>

谷歌里可以的

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

qq_e累_0 提問(wèn)者

chrom里不可以就是滾動(dòng)條自動(dòng)向上滑時(shí) 滑動(dòng)鼠標(biāo)滑輪沒(méi)有清除定時(shí)器同學(xué)的代碼在chrom也可以

2015-11-27 回復(fù) 有任何疑惑可以回復(fù)我~