文章标签 ‘top’ 的存档

• 关于top置顶的交互体验

  日期：2009.11.07 | 分类：JavaScript, 交互设计 | 评论数：0

  “TOP置顶”这个大家我想都不陌生，一般都用在网站底部，起到快速返回页面顶部的作用，节省用户浏览页面的时间。

  谈谈我的一些体验吧！

  先看当下一些的网站对“top置顶”的应用:

  大家熟悉的QQ校友

  

  QQ空间

  

  飞跃梦想博客(这个风格好像很多人都在用哦)

  

  他们都有一个共同的体验，那就是给用户一个缓冲的过程，而不是直接飙到顶部。

  大多的网站应用方式都是直接给个空的链接，如：href=”#”;这样的置顶很僵硬，很呆板。

  本博客底部就用到的缓冲的体验效果，大家不妨看完本文去体验一下哦

  说了这么多，还没告诉大家如何去实现，方法有点小难度，当然对于js比较牛的人来说，那就小菜一碟了。。

  只看代码：

  /**
   * 回到页面顶部
   * @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
  

  大家慢慢研究一番就明白了哈。。

  给看下效果：

  http://www.86ue.com/download/blog/200911/top.html

  看完货效果不错吧。

  PS:兼容IE6/7 火狐3.5以上版本