1. 最简单的静态返回顶部，点击直接跳转页面顶部，常见于固定放置在页面底部返回顶部功能
方法一：用命名锚点击返回到顶部预设的id为top的元素
<a href="#top" target="_self">返回顶部</a>方法二：操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）
<a href="javascript:scroll(0,0)">返回顶部</a> 缺点：返回效果是立即的，不符合一般浏览页面的滚动感觉； 静态固定于页面底部，用户不一定看得到。
2. 简单的静态返回顶部，用js模拟滚动效果上滑至顶部
function pageScroll(){ //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数） window.scrollBy(0,-100); //延时递归调用，模拟滚动向上效果 scrolldelay = setTimeout(‘pageScroll()‘,100); //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值 var sTop=document.documentElement.scrollTop+document.body.scrollTop; //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面） if(sTop==0) clearTimeout(scrolldelay);}
<a onclick="pageScroll()">返回顶部</a>缺点：滚动效果不平滑，且在页面很长时点击返回顶部，未向上到达页面顶部无法再正常浏览页面； 同上依旧是静态固定于页面底部，不一定能曝光在用户面前。
3. 动态按需加载返回顶部，css侧边屏幕绝对定位，结合简单jQuery动画实现更好体验
function gotoTop(min_height){ //预定义返回顶部的html代码，它的css样式默认为不显示 var gotoTop_html = ‘<div id="gotoTop">返回顶部</div>‘; //将返回顶部的html代码插入页面上id为page的元素的末尾 $("#page").append(gotoTop_html); $("#gotoTop").click(//定义返回顶部点击向上滚动的动画 function(){$(‘html,body‘).animate({scrollTop:0},700); }).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现 function(){$(this).addClass("hover");}, function(){$(this).removeClass("hover"); }); //获取页面的最小高度，无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处理函数 $(window).scroll(function(){ //获取窗口的滚动条的垂直位置 var s = $(window).scrollTop(); //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐 if( s > min_height){ $("#gotoTop").fadeIn(100); }else{ $("#gotoTop").fadeOut(200); }; });};gotoTop();
/*默认样式，主要是position:fixed实现屏幕绝对定位*/#gotoTop{display:none;position:fixed;top:75%;left:50%;cursor:pointer;margin-top:-50px;margin-left:520px;padding:9px 4px;width:20px;text-align:center;border:1px solid #e0e0e0;background:#fff;}/*用CSS表达式(expression)来实现ie6下position:fixed效果*/#gotoTop{_position:absolute;_top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}/*鼠标进入的反馈效果*/#gotoTop.hover{background:#5CB542;color:#fff;text-decoration:none;}
<!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>回到顶部 - 豪情</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}
a:focus,input,textarea{outline-style:none;}
a{color:#0a8cd2;text-decoration:none;}
a:hover{text-decoration:underline;}
.none{display:none}
.demo{ height:2000px;}
.gotop{ width:18px;line-height:1.2;padding:7px 0px 7px 2px;background-color:#000;color:#fff;font-size:12px;text-align:center;position:fixed;_position:absolute;right:0px;bottom:100px;_bottom:"auto";cursor:pointer;opacity:0.6;filter:Alpha(opacity=60);border-radius:5px 0 0 5px; display:none;}
.gotop:hover{ text-decoration:none;opacity:0.7;filter:Alpha(opacity=70);}
</style>
</head>
<body>
<div class="demo"></div>
<script type="text/javascript">
(function(){
function viewSize(){
var doc = document,
de = doc.documentElement;
return {
‘width‘: (window.innerWidth || (de && de.clientWidth) || doc.body.clientWidth),
‘height‘: (window.innerHeight || (de && de.clientHeight) || doc.body.clientHeight)
};
}
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
var btn = null,
timer = 0;
function apendScroll(){
btn = document.createElement(‘a‘);
btn.href = ‘javascript:void(0)‘;
btn.className = ‘gotop‘;
btn.innerHTML = ‘回到顶部‘;
document.body.appendChild(btn);
}
apendScroll();
function ie6Top(){
if(!window.XMLHttpRequest){
btn.style.top = getScrollTop() + viewSize().height - 200 + ‘px‘;
}
}
window.onscroll = function(){
btn.style.display = getScrollTop() > 0 ? ‘block‘ : ‘none‘;
ie6Top();
}
btn.onclick = function(){
timer = setInterval(function(){
var scrollTop = getScrollTop();
var iSpeed = Math.floor(- scrollTop / 8);
if(scrollTop == 0){
clearInterval(timer);
}
ie6Top();
document.documentElement.scrollTop = document.body.scrollTop = scrollTop + iSpeed;
}, 30);
}
}());
</script>
</body>
</html>
这种方法判断页面高度按需将“返回顶部”展示给用户，用css样式实现了屏幕绝对定位，借助jQuery实现了更好用平滑的滚动效果。进一步考虑如果用户设置了浏览器禁用js，那么我们可以将第三方案结合第一方案方法一，禁用js后第三方案将不被用户所见，未禁用的话我们在js代码中再加上一句隐藏第一方案。总之，长页面还是要尽量避免的，不可避免的情况下，加上“返回顶部”功能可能会带给用户相对好一点的体验。