<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
@font-face {
font-family:iconfont;/*创建的新字体图标的名称*/
src:url("image/iconfont.woff");/*创建新字体图标的文件存放的位置*/
}
.iconfont{/*使用新字体图标*/
font-family:iconfont;
color:lawngreen;
font-size:70px;
position: fixed;
bottom:50px;
right:30px;
/*display:none;*/
}
</style>
<body>
<!--返回顶部-->
<div id="toTopHover">
<!-- 使用新字体图标-->
<span class="iconfont"></span>
</div>
<!--这里放你写的页面内容-->
<div id="container">
<img src="image/lunbo1.jpg"/>
<img src="image/lunbo2.jpg"/>
<img src="image/lunbo3.jpg"/>
<img src="image/lunbo4.jpg"/>
<img src="image/lunbo5.jpg"/>
<img src="image/lunbo6.jpg"/>
</div>
<script type="text/javascript">
var toTopHover=document.getElementById("toTopHover");//获取返回顶部的哪部分id
//console.log(toTopHover);//这里可以在后台检测你是否获取到id
var time = null;
//点击事件：点击图标返回顶部
toTopHover.onclick = function () {
//创建一个可重复执行的定时器，来执行滚动条滚动的操作，每100毫秒调用一次
time = setInterval(Return, 100);
}
//创建返回顶部的函数
function Return(){
// scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
var s=document.body.scrollTop;//获取浏览器滚动条滚动的距离
document.body.scrollTop=document.body.scrollTop-100;//返回顶部浏览器滚动条每次滚动的距离
if(s==0){
clearTimeout(time);//清除定时器
}
}
</script>
</body>
</html>
font-family:iconfont;/*创建的新字体图标的名称*/
src:url("image/iconfont.woff");/*创建新字体图标的文件存放的位置*/
在这里做几点说明：
1、"<span class="iconfont"></span>"这里也可以改成插图片:<img src="图片路径"/>,或者你想要的东西
2、字体图标的应用：
（1）先在css中创建：
@font-face{
font-family:iconfont;//创建的新字体图标的名称，这里为iconfont
src:url("路径")；
}
(2)在html中使用
<span class="iconfont">字体图标编码</span>
(3)在css中对创建的字体图标进行样式处理（和字体的应用一样）
.iconfont{
font-family:iconfont;
font-size:40px;
color:red;
}
3、定时器（时间单位为毫秒，1s=1000ms）
（1）、设置定时器
setTimeout(执行操作，时间);//只执行一次
setInterval(执行操作,时间);//可重复执行
（2）、清除定时器
clearTimeout(定时器的名称);//清除只执行一次的
clearInterval(定时器的名称);//清除重复执行的