CSSrainbow.cn

Sharing what I know and learn about (X)HTML,CSS,JavaScript,MooTools,Dojo,jQuery,PHP,ASP,Java,Python and ∞.

Tutorials \ JavaScript \ Tutorials \ MooTools \ Tutorials \ jQuery

关于‘TOP’置顶链接的那些事儿 »

Posted on: in JavaScript, MooTools, jQuery By:
Rainbow
0

‘TOP’置顶链接，说的通俗一点就是‘返回顶部的链接’，‘go to top ’一般都放在页面的底部，它可以快速返回页面顶部，以节省用户浏览页面的时间。 它主要的应用场景是
当你有一个很长的网页内容时，您通常要 把 ‘TOP’锚点链接 添加在页面底部，只要用户一点击‘TOP’链接 ,就可以马上回到 页面的顶部了。

我们遇到的问题是：不是滚动到页面底部的时候才看到了‘TOP’,如果页面内容超过两屏以上时，用户有些心烦，我不想看了，我想回到顶部看一些其他的内容。
如果我们只看了第一屏的文章，不想看了，可是‘TOP’在第二屏才会出现。

这时候有三种情况发生：

  1. 发挥鼠标特长就是拖动浏览器的滚动条或是滚动鼠标滑轮，回到页面顶部。
  2. 继续硬着头皮往下看，看有没有‘TOP’,幸运的话，马上找到了，可以回到顶部了。（一般人心中是没有‘TOP’概念的，只有选择1 和3 的方法了）
  3. 直接关闭网页，或者重新打开网站，或者离开网站。

我想我们已经找到了问题的所在了。

我们有三种方案可以给用户带来良好的用户体验：

方案一：在合适的地方，手动加入一个或多个‘TOP’链接。

这是最原始的做法了，如果滚动太快，验，那就是我们给用户用脚本实现一下缓冲效果，而不是直接飙到顶部。

The HTML :

1

 <a id="gototop" href="javascript:void(0);" onclick="goTop();return false;">Top of Page</a>

The JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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

 

View Demo

 

方案二：‘TOP’默认是隐藏的，只要滚动条，滚动到一定高度时就显示，否则就隐藏。

这样我可能想从中间某处回到页面的顶部成为可能。

The HTML :

1

 <a href="#top" id="gototop" >Top of Page</a>

The CSS :

1
2

#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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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')
	});
});

 

View Demo

 

还有一个例子是动态生成‘TOP’。

The MooTools JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/**
 * 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
    });
  });
}

 

View Demo

 

The jQuery JavaScript :

需要jQuery’s ScrollTo plugin 插件添加一些平滑的锚。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//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);
	});
});

 

View Demo

 

注意：

Please note that this version doesn’t work with Internet Explorer due to IE’s lack of CSS “position:fixed” support. Here is a shotty attempt at IE support:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

 
    //plugin
    jQuery.fn.topLink = function(settings) {
		settings = jQuery.extend({
			min: 1,
			fadeSpeed: 200,
			ieOffset: 50
		}, settings);
		return this.each(function() {
			//listen for scroll
			var el = $(this);
			el.css('display','none'); //in case the user forgot
			$(window).scroll(function() {
				//stupid IE hack
				if(!jQuery.support.hrefNormalized) {
					el.css({
						'position': 'absolute',
						'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
					});
				}
				if($(window).scrollTop() >= settings.min)
				{
					el.fadeIn(settings.fadeSpeed);
				}
				else
				{
					el.fadeOut(settings.fadeSpeed);
				}
			});
		});
	};
 
 
$(document).ready(function() {
	$('#gototop').topLink({
		 min: 400,
		 fadeSpeed: 500
    });
	 //smoothscroll
	 $('#gototop').click(function(e) {
		 e.preventDefault();
		 $.scrollTo(0,300);
	});
});

 

View Demo

 

方案三：在浮动的工具条中加入‘Top’ 或 ‘Bottom’锚点链接。

我说的浮动工具条，可以是顶部工具条，也可以是侧边栏工具条。


ScrollSidebar

 

View Demo

 

fixedFadeOutMenu

 

View Demo

— The End —

Leave a Comment