网站添加返回顶部的方法有好多种，下面就说下简单的返回顶部效果的代码实现，另附加注释说明，最简单的静态返回顶部，点击直接跳转页面顶部及用 JS 模拟 CSS3 滚动效果上滑至顶部:
方法一 ： 最简单的静态返回顶部
使用文字添加方法，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能
1.用自定义命名锚点点击返回到顶部预设的id为gotop的元素:
<a href="#gotop" target="_self">返回顶部</a>
2.操作 javascript:scroll(0,0) 函数用来控制滚动条的位置（0,0 : 第一个参数是水平位置，第二个参数是垂直位置）:
<a href="javascript:scroll(0,0)">返回顶部</a>
静态固定于页面底部的话，用户不一定看得到，那效果就不明显了。
方法二 ：简单的静态返回顶部，用js模拟滚动效果上滑至顶部
HTML 结构：
<a onclick="pageScroll()">返回顶部</a>
function pageScroll(){
//把内容滚动指定的像素数值（ 0,0 ：第一个参数是向右滚动的像素数值，第二个参数是向下滚动的像素数值）
window.scrollBy(0,-100);
//模拟滚动向上效果
scrolldelay = setTimeout('pageScroll()',100);
//获取scrollTop值，声明了标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）
if(sTop==0) clearTimeout(scrolldelay);
}
同上依旧是静态固定于页面底部，不一定能曝光在用户面前。
方法三 ：动态按需加载返回顶部，css侧边屏幕绝对定位，结合简单jQuery动画实现更好体验
HTML 结构：
我使用的 div 标签作为这个结构，可能不标准，但是比较方便。在 div 标签中，内置了一个 span 标签，用来显示文字。具体代码如下：
<div id="gotop"><span>回到顶部</span></div>
对，就这么简单的一句代码，直接在 span 标签中，填写 “返回顶部” 几个文字（这里用字还是用图是你自己来定的哈，我只是演示一下）。剩下的就是使用 CSS 进行样式控制。
当然，不要忘了引用jQuery库（你也可以下载下载下来从本地链）！！！：
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
这段代码需要添加在<head>...</head>里。
CSS 代码：
/*gotop 返回顶部css样式控制*/
#gotop{
width:60px;
height:60px;
position:fixed;
bottom: 6%; //这里我用的百分比控制位置，你也可以选择px来控制，我是遵循自适应
right: 2%;
border-radius:10px 10px 10px 10px; //改变div圆角效果，可能我的有点小，根据自己来改变
text-decoration:none;
background: gray; //背景颜色，我的可能有点重
display: none; //先设置none
}
上面这段样式代码，定义了 div 标签的外观样式，定义 display 为 none，这样，我们才能在顶部时看不见它。定义 position 为 fixed ，让它固定在右下角。同时为它指定圆角，就是使用 border-radius 属性，定于半径为10px的圆角（我这里定义的可能有点小，根据情况自己定义）。
#gotop span{
display:block;
font:14px "microsoft yahei";
text-align: center; //设置文字水平居中显示
color: white;
line-height: 60px; //让文字垂直居中显示，数值根据div高度改变
}
上面这段样式，就是定义了 span 标签里面的文字。这几句代码意思很简单，就是定义了文字的外观样式，同时制定了颜色变化（我给的白色，当然根据需求自己改变哈...），这是为了用户体验。最下面的 line-height: 60px，则是用来准确定位文字，让它垂直居中显示（具体放到哪里还是要根据自己来定哈）。
接下来就是 jQuery 的代码了：
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
if( scrollt > 800 ){ //判断滚动后高度超过800px,显示
$("#gotop").fadeIn(400); //淡出
}else{
$("#gotop").stop(true,true).fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
}
});
//当点击标签的时候,使用animate在1000毫秒的时间内,返回到顶部
$("#gotop").click(function(){
$("html,body").animate({scrollTop:"0px"},1000);
});
});
</script>
我这里展示的都是用文字，并没有用到任何图片，比较简单，需要用图片的替换成图片就可以了。
还算简单吧？就用这几句代码而已，就可以出现这个返回顶部功能。当然缺点也会是有的，就是在 IE6 等过时的浏览器中，可能不会兼容，无法实现（没办法啊，jQuery库 只兼容在 IE6 之后啊ToT ...）。
这就是做出来的效果（并不好看，不喜勿喷啊）：
3种，也很简单了，现在都有很多网站用的插件；友情推荐，自带返回顶部 的JS，自己写就可以，用什么插件啊！
好了，以上就是本次分享内容，感谢您的参考~
Comments | NOTHING