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

【 tulaoshi.com - Web开发 】

对于版面较长的网页，在底部会放上返回顶部的锚点链接，做法也很简单，直接用HTML就能实现，不过这种效果不交呆板，原因就是向上移动很突然，经常会让用户产生莫名的感觉，本文结合JS将实现一种滑动返回顶部的网页效果，这样用户感觉会比较舒服。

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

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

这时候有三种情况发生：

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

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

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

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

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

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

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

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

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

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

需要 插件添加一些平滑的锚。

//pluginjQuery.fn.topLink = function(settings) {settings = jQuery.extend({min: 1,fadeSpeed: 200}, settings);return this.each(function() {//listen for scrollvar 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);});});

注意：

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:

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