返回顶部

<!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">&#xe644;</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">&#xe644;</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(定时器的名称);//清除重复执行的