代码如下：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body {width: 2000px;}.top{position: fixed;right:50px;bottom:100px;display: none;}</style><script src="my.js" type="text/javascript"></script><script>window.onload = function() {var goTop = $("gotop");window.onscroll = function() {scroll().top > 0 ? show(goTop) : hide(goTop); // 如果大于0 就显示 否则隐藏leader = scroll().top; // 把 卷去的头部 给 起始位置
console.log(scroll().top);}var leader = 0,target = 0,timer = null;// leader 起始位置 target 目标位置goTop.onclick = function() {target = 0; // 点击完毕之后 奔向0 去的 不写也可以timer = setInterval(function() {leader = leader (target - leader ) / 10;window.scrollTo(0,leader); // 去往页面中的某个位置if(leader == target){clearInterval(timer);}},20);}}</script>
</head>
<body>
<div id="gotop" class="top"><img src="images/Top.jpg" alt=""/>
</div>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
<p>我是内容部分，有很多恩多很多</p>
</body>
</html>my.js为自己封装的小插件
/*** Created by andy on 2015/11/19.*/
function $(id) {return document.getElementById(id);}
function show(obj) { obj.style.display = "block";}
function hide(obj) { obj.style.display = "none";}
function scroll() {if(window.pageYOffset != null) // ie9 和其他浏览器
{return {left: window.pageXOffset,top: window.pageYOffset}}else if(document.compatMode == "CSS1Compat") // 声明的了 DTD// 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
{return {left: document.documentElement.scrollLeft,top: document.documentElement.scrollTop}}return { // 剩下的肯定是怪异模式的
left: document.body.scrollLeft,top: document.body.scrollTop}
}
更多专业前端知识，请上 【猿2048】www.mk2048.com
![echarts（一）下载引入，调色盘，[标题、图例组件、坐标轴]](https://img-blog.csdnimg.cn/20191104162830161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N0YXJ0MjAxOQ==,size_16,color_FFFFFF,t_70)
![Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G](https://images2018.cnblogs.com/blog/1353898/201804/1353898-20180420224809444-1521438508.jpg)
