锚链接
优点:
- 简单快速、没有兼容性问题
缺点:
- 视觉上不够直观,用户体验不够好
用JavaScript制作回到顶部效果
- 当滚动条滚动一定距离的时候,页面就出现回到顶部的图标
- 点击按钮滚动条滚动到顶部
主要知识点
DOM操作:
- document.getElementById 根据ID获取标签元素
- document.documentElement.scrollTop 滚动条的数值,可读写
事件运用:
- window.onload 页面加载完毕后触发
- onclick 点击后触发
- window.onscroll 滚动条滚动时触发
定时器:
- setInterval() 设置定时器,需传2个参数
- clearInterval() 关闭定时器,需传1个参数
用HTML + CSS实现页面布局
index.html:
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Javascript 返回顶部</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="bg">
<img src="images/bg1.jpg" alt="" />
<img src="images/bg2.jpg" alt="" />
<img src="images/bg3.jpg" alt="" />
<img src="images/bg4.jpg" alt="" />
<img src="images/bg5.jpg" alt="" />
<img src="images/bg6.jpg" alt="" />
<img src="images/bg7.jpg" alt="" />
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
</body>
</html>
style.css:
body {
margin-top: 15px;
background-color: #f0f0f0;
}
.bg{
width:1190px;margin:0 auto;
}
.bg img {
width: 100%;
display: block;
margin-bottom: 15px;
-moz-box-shadow:0px 0px 10px #000005; -webkit-box-shadow:0px 0px 10px #000005; box-shadow:0px 0px 10px #000005;
}
#btn {width:40px; height:40px; position:fixed; right:65px; bottom:10px; background:url(images/top_bg.png) no-repeat left top;}
#btn:hover {background:url(images/top_bg.png) no-repeat 0 -39px;}
script.js:
// 页面加载完毕后触发
window.onload = function () {
var obtn = document.getElementById('btn');
// 获取页面可视区的高度
var clientHeight = document.documentElement.clientHeight;
var timer = null
var isTop = true
// 滚动条滚动时触发
window.onscroll = function () {
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if(osTop >= clientHeight) {
obtn.style.display = 'block'
} else {
obtn.style.display = 'none'
}
if(!isTop) {
clearInterval(timer);
}
isTop = false
}
obtn.onclick = function(){
// 设置定时器
timer = setInterval(function () {
// 获取滚动条距离顶部的高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var ispeed = Math.floor( -osTop / 6 );
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
isTop = true
console.log(osTop)
if(osTop === 0) {
clearInterval(timer);
}
},30);
}
}