方法一：
直接用html实现，没有缓冲的效果，直接彪到顶部。
1 HTMl: 2 3 <a id="return-top" href="#top"> 4 <span class="pointer"></span> 5 <p class="black-circle">TOP</p> 6 </a> 7 8 9 CSS: 10 11 #return-top{ 12 51px; 13 height:51px; 14 position:fixed; 15 right:0; 16 bottom:0; 17 z-index: 100; 18 border-radius: 51px; 19 background: #424243; 20 21 } 22 .pointer{ 23 display: inline-block; 24 background: url(../img/icon_backtotop.png) no-repeat top center; 25 21px; 26 height:13px; 27 position: relative; 28 top:16px; 29 left:15px; 30 } 31 .black-circle{ 32 color:#fff; 33 text-align: center; 34 51px; 35 font-size: 12px; 36 height:12px; 37 margin-top:15px; 38 } 39 #return-top:hover .pointer{ 40 top:10px; 41 }
方法二：在方法一的基础之上加缓冲效果，即添加js实现
js代码如下：
/**
* 作者：我是UED ，http://www.iamued.com/qianduan/816.html
* 回到页面顶部
* @param acceleration 加速度
* @param time 时间间隔 (毫秒)
**/
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滚动条到页面顶部的水平距离
var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离
var y = Math.max(y1, Math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
// 如果距离不为零, 继续调用迭代本函数
if(x > 0 || y > 0) {
var invokeFunction = goTop( +acceleration+ , +time+ );
window.setTimeout(invokeFunction, time);
}
}
方法三：‘TOP’默认是隐藏的，只要滚动条，滚动到一定高度时就显示，否则就隐藏。
这样我可能想从中间某处回到页面的顶部成为可能。
The HTML :
<a href=#top id=gototop >Top of Page</a>
The CSS :
#gototop { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none; border:1px solid green; background:Lightgreen; padding:10px; } #gototop { text-decoration:underline; }
The MooTools JavaScript : 注意： 我们需要MooTools Core 库的同时，也需要MooTools More 库中的 Fx.Scroll.js 和 Fx.SmoothScroll.js 两大文件。
1 window.addEvent('domready',function() { 2 new SmoothScroll({duration:700}); 3 /* go to top */ 4 var go = $('gototop'); 5 go.set('opacity','0').setStyle('display','block'); 6 window.addEvent('scroll',function(e) { 7 if(Browser.Engine.trident4) { 8 go.setStyles({ 9 'position': 'absolute', 10 'bottom': window.getPosition().y + 10, 11 'width': 100 12 }); 13 } 14 go.fade((window.getScroll().y > 300) ? 'in' : 'out') 15 }); 16 });
方法3：还有一个例子是动态生成‘TOP’。
The MooTools JavaScript :
1 /** 2 * back-to-top: unobtrusive global 'back to top' link using mootools 1.2.x 3 * This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License. 4 * http://creativecommons.org/licenses/by-sa/3.0/ 5 */ 6 7 // hide the effect from IE6, better not having it at all than being choppy. 8 if (!Browser.Engine.trident4) { 9 // element added onload for IE to avoid the operation aborted bug. not yet verified for IE8 as it's still on beta as of this modification. 10 window.addEvent((Browser.Engine.trident ? 'load' : 'domready'), function(){ 11 var target_opacity = 0.64; 12 new Element('span', { 13 'id': 'back-to-top', 14 'styles': { 15 opacity: target_opacity, 16 display: 'none', 17 position: 'fixed', 18 bottom: 0, 19 right: 0, 20 cursor: 'pointer' 21 }, 22 'text': 'back to top', 23 'tween': { 24 duration: 200, 25 onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')} 26 }, 27 'events': {'click': function() { 28 /*location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用 location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如 http://ued.alimama.com#admin的location.hash=#admin,利用这个属性值可以实现很多效果。*/ 29 if (window.location.hash) { window.location.hash = '#top'; } 30 else { window.scrollTo(0, 0);/*把窗口内容滚动到指定的坐标。*/ } 31 }} 32 }).inject(document.body); 33 34 window.addEvent('scroll', function() { 35 var visible = window.getScroll().y > (window.getSize().y * 0.8); 36 if (visible == arguments.callee.prototype.last_state) return; 37 38 // fade if supported 39 if (Fx && Fx.Tween) { 40 if (visible) $('back-to-top').fade('hide').setStyle('display', 'inline').fade(target_opacity); 41 else $('back-to-top').fade('out'); 42 } else { 43 $('back-to-top').setStyle('display', (visible ? 'inline' : 'none')); 44 } 45 46 arguments.callee.prototype.last_state = visible 47 }); 48 }); 49 }
The jQuery JavaScript :
需要jQuery’s ScrollTo plugin 插件添加一些平滑的锚。
1 //plugin 2 jQuery.fn.topLink = function(settings) { 3 settings = jQuery.extend({ 4 min: 1, 5 fadeSpeed: 200 6 }, settings); 7 return this.each(function() { 8 //listen for scroll 9 var el = $(this); 10 el.hide(); //in case the user forgot 11 $(window).scroll(function() { 12 if($(window).scrollTop() >= settings.min) 13 { 14 el.fadeIn(settings.fadeSpeed); 15 } 16 else 17 { 18 el.fadeOut(settings.fadeSpeed); 19 } 20 }); 21 }); 22 }; 23 24 //usage w/ smoothscroll 25 $(document).ready(function() { 26 //set the link 27 $('#gototop').topLink({ 28 min: 400, 29 fadeSpeed: 500 30 }); 31 //smoothscroll 32 $('#gototop').click(function(e) { 33 e.preventDefault(); 34 $.scrollTo(0,300); 35 }); 36 });
以上代码针对ie7不使用，针对ie7代码如下：
1 //plugin 2 jQuery.fn.topLink = function(settings) { 3 settings = jQuery.extend({ 4 min: 1, fadeSpeed: 200, 5 ieOffset: 50 6 }, settings); 7 return this.each(function() { 8 //listen for scroll 9 var el = $(this); 10 el.css('display','none'); //in case the user forgot 11 $(window).scroll(function() { 12 //stupid IE hack 13 if(!jQuery.support.hrefNormalized) { 14 el.css({ 15 'position': 'absolute', 16 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset 17 }); 18 } 19 if($(window).scrollTop() >= settings.min) 20 { 21 el.fadeIn(settings.fadeSpeed); 22 } 23 else 24 { 25 el.fadeOut(settings.fadeSpeed); 26 } 27 }); 28 }); 29 }; 30 31 32 $(document).ready(function() { 33 $('#gototop').topLink({ 34 min: 400, 35 fadeSpeed: 500 36 }); 37 //smoothscroll 38 $('#gototop').click(function(e) { 39 e.preventDefault(); 40 $.scrollTo(0,300); 41 }); 42 });