网页教程:页面返回顶部锚点按钮的设计

/**
 * 作者：我是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);
	}
}

#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; }

window.addEvent('domready',function() {
	new SmoothScroll({duration:700});
	/* go to top */
	var go = $('gototop');
	go.set('opacity','0').setStyle('display','block');
window.addEvent('scroll',function(e) {
	if(Browser.Engine.trident4) {
		 go.setStyles({
			 'position': 'absolute',
			 'bottom': window.getPosition().y + 10,
			 'width': 100
		 });
		}
		go.fade((window.getScroll().y > 300) ? 'in' : 'out')
	});
});

/**
 * back-to-top: unobtrusive global 'back to top' link using mootools 1.2.x
 * This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
 *   http://creativecommons.org/licenses/by-sa/3.0/
 */
 
// hide the effect from IE6, better not having it at all than being choppy.
if (!Browser.Engine.trident4) {
  // 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.
  window.addEvent((Browser.Engine.trident ? 'load' : 'domready'), function(){
    var target_opacity = 0.64;
    new Element('span', {
      'id': 'back-to-top',
      'styles': {
        opacity: target_opacity,
        display: 'none',
        position: 'fixed',
        bottom: 0,
        right: 0,
        cursor: 'pointer'
      },
      'text': 'back to top',
      'tween': {
        duration: 200,
        onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')}
      },
      'events': {'click': function() {
		  /*location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用 location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如 http://ued.alimama.com#admin的location.hash=”#admin”,利用这个属性值可以实现很多效果。*/
        if (window.location.hash) { window.location.hash = '#top'; }
        else { window.scrollTo(0, 0);/*把窗口内容滚动到指定的坐标。*/ }
      }}
    }).inject(document.body);
 
    window.addEvent('scroll', function() {
      var visible = window.getScroll().y > (window.getSize().y * 0.8);
      if (visible == arguments.callee.prototype.last_state) return;
 
      // fade if supported
      if (Fx && Fx.Tween) {
        if (visible) $('back-to-top').fade('hide').setStyle('display', 'inline').fade(target_opacity);
        else $('back-to-top').fade('out');
      } else {
        $('back-to-top').setStyle('display', (visible ? 'inline' : 'none'));
      }
 
      arguments.callee.prototype.last_state = visible
    });
  });
}

//plugin
jQuery.fn.topLink = function(settings) {
	settings = jQuery.extend({
		min: 1,
		fadeSpeed: 200
	}, settings);
	return this.each(function() {
		//listen for scroll
		var el = $(this);
		el.hide(); //in case the user forgot
		$(window).scroll(function() {
			if($(window).scrollTop() >= settings.min)
			{
				el.fadeIn(settings.fadeSpeed);
			}
			else
			{
				el.fadeOut(settings.fadeSpeed);
			}
		});
	});
};
 
//usage w/ smoothscroll
$(document).ready(function() {
	//set the link
	$('#gototop').topLink({
		min: 400,
		fadeSpeed: 500
	});
	//smoothscroll
	$('#gototop').click(function(e) {
		e.preventDefault();
		$.scrollTo(0,300);
	});
});