課程
/前端開(kāi)發(fā)
/HTML/CSS
/回到頂部效果
請(qǐng)問(wèn)誰(shuí)有這頁(yè)面回到頂部的完整代碼呢， 有過(guò)程解釋的最好，謝謝了
2018-07-20
源自：回到頂部效果 4-4
正在回答
這是我自己寫(xiě)的JS執(zhí)行代碼 跟課程講的稍有差別?
哈爾波兒 提問(wèn)者
<!DOCTYPE html>
<html>
<head>
? ? <title>Javascript 回到頂部效果</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>
<script>
window.onload = function () {
//設(shè)置所需變量
var oBtn = document.getElementById('btn');
var scrollTop = 0;
var timer = null;
//滾動(dòng)時(shí)按鈕的顯示與隱藏
window.onscroll = function () {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可視區(qū)高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if(scrollTop >= clientHeight) {
oBtn.style.display = 'block';
else {
oBtn.style.display = 'none';
};
//點(diǎn)擊回到頂部
oBtn.onclick = function () {
//設(shè)置定時(shí)器
timer = setInterval(function () {
// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//定義緩沖速度
var iSpeed = scrollTop/5;
//頂部關(guān)閉定時(shí)器
if (scrollTop == 0) {
clearInterval(timer);
document.documentElement.scrollTop = document.body.scrollTop = Math.floor(scrollTop - iSpeed);
console.log(scrollTop);
},30);
</script>
</head>
<body>
<div class="box">
<img src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到頂部"></a>
</body>
</html>
舉報(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)
2018-08-23
這是我自己寫(xiě)的JS執(zhí)行代碼 跟課程講的稍有差別?
2018-08-23
<!DOCTYPE html>
<html>
<head>
? ? <title>Javascript 回到頂部效果</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>
<script>
window.onload = function () {
//設(shè)置所需變量
var oBtn = document.getElementById('btn');
var scrollTop = 0;
var timer = null;
//滾動(dòng)時(shí)按鈕的顯示與隱藏
window.onscroll = function () {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可視區(qū)高度
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if(scrollTop >= clientHeight) {
oBtn.style.display = 'block';
}
else {
oBtn.style.display = 'none';
}
};
//點(diǎn)擊回到頂部
oBtn.onclick = function () {
//設(shè)置定時(shí)器
timer = setInterval(function () {
// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//定義緩沖速度
var iSpeed = scrollTop/5;
//頂部關(guān)閉定時(shí)器
if (scrollTop == 0) {
clearInterval(timer);
}
document.documentElement.scrollTop = document.body.scrollTop = Math.floor(scrollTop - iSpeed);
console.log(scrollTop);
},30);
};
};
</script>
</head>
<body>
<div class="box">
<img src="http://img1.sycdn.imooc.com//535e0ce800015b7511902787.jpg" />
</div>
<a href="javascript:;" id="btn" title="回到頂部"></a>
</body>
</html>