滑动效果的返回顶部锚点按钮
<p>‘TOP’置顶链接，说的通俗一点就是‘返回顶部的链接’，‘go to top ’一般都放在页面的底部，它可以快速返回页面顶部，以节省用户浏览页面的时间。 它主要的应用场景是
当你有一个很长的网页内容时，您通常要 把 ‘TOP’锚点链接 添加在页面底部，只要用户一点击‘TOP’链接 ,就可以马上回到 页面的顶部了。</p><p>我们遇到的问题是：不是滚动到页面底部的时候才看到了‘TOP’,如果页面内容超过两屏以上时，用户有些心烦，我不想看了，我想回到顶部看一些其他的内容。
如果我们只看了第一屏的文章，不想看了，可是‘TOP’在第二屏才会出现。</p><div style="page-break-after: always;"><span style="display: none;"><!--more-->& nbsp ;</span></div><p>这时候有三种情况发生：</p><ol> <li>发挥鼠标特长就是拖动浏览器的滚动条或是滚动鼠标滑轮，回到页面顶部。</li> <li>继续硬着头皮往下看，看有没有‘TOP’,幸运的话，马上找到了，可以回到顶部了。（一般人心中是没有‘TOP’概念的，只有选择1 和3 的方法了）</li> <li>直接关闭网页，或者重新打开网站，或者离开网站。</li></ol><p>我想我们已经找到了问题的所在了。</p><p>我们有三种方案可以给用户带来良好的用户体验：</p><h2>方案一：在合适的地方，手动加入一个或多个‘TOP’链接。</h2><p>这是最原始的做法了，如果滚动太快，验，那就是我们给用户用脚本实现一下缓冲效果，而不是直接飙到顶部。</p><h3>The HTML :</h3><table align="center" border="0" cellpadding="6" cellspacing="0" style="line-height:22.390625px;" width="95%"> <tbody> <tr> <td> <a id="gototop"href="javascript:void(0);"onclick="goTop();return false;">Top of Page</a></td> </tr> </tbody></table><h3>The JavaScript :</h3><table align="center" border="0" cellpadding="6" cellspacing="0" style="line-height:22.390625px;" width="95%"> <tbody> <tr> <td> <pre>/ 作者：我是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);}}</pre> </td> </tr> </tbody></table><p>DEMO测试网址</p><h2>方案二：‘TOP’默认是隐藏的，只要滚动条，滚动到一定高度时就显示，否则就隐藏。</h2><p>这样我可能想从中间某处回到页面的顶部成为可能。</p><h3>The HTML :</h3><table align="center" border="0" cellpadding="6" cellspacing="0" style="line-height:22.390625px;" width="95%"> <tbody> <tr> <td><ahref="#top"id="gototop" >Top of Page</a></td> </tr> </tbody></table><p>The CSS :</p><table align="center" border="0" cellpadding="6" cellspacing="0" style="line-height:22.390625px;" width="95%"> <tbody> <tr> <td> <pre>#gototop{display:none;position:fixed;right:5px;bottom:5px;color:green;font-weight:bold;text-decoration:none;border:1pxsolidgreen;background:Lightgreen;padding:10px;}#gototop{text-decoration:underline;}</pre> </td> </tr> </tbody></table><h3>The MooTools JavaScript :</h3><h3>注意：</h3><h3>我们需要MooTools Core 库的同时，也需要MooTools More 库中的 Fx.Scroll.js 和 Fx.SmoothScroll.js 两大文件。</h3><table align="center" border="0" cellpadding="6" cellspacing="0" style="line-height:22.390625px;" width="95%"> <tbody> <tr> <td> <pre>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')});});</pre> </td> </tr> </tbody></table><p><strong><a href="http://www.websbook.com/upimg/allimg/100402/2.htm" target="_blank">DEMO测试网址</a></strong></p><p>还有一个例子是动态生成‘TOP’。</p><h3>The MooTools JavaScript :</h3><table align="center" border="0" cellpadding="6" cellspacing="0" style="line-height:22.390625px;" width="95%"> <tbody> <tr> <td> <pre>/** * 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 supportedif(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 });});}</pre> </td> </tr> </tbody></table><h3>The jQuery JavaScript :</h3><p>需要jQuery’s ScrollTo plugin 插件添加一些平滑的锚。</p><table align="center" border="0" cellpadding="6" cellspacing="0" style="line-height:22.390625px;" width="95%"> <tbody> <tr> <td> <pre>//pluginjQuery.fn.topLink=function(settings){ settings = jQuery.extend({ min:1, fadeSpeed:200}, settings);returnthis.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);});});</pre> </td> </tr> </tbody></table><p><strong><a href="http://www.websbook.com/upimg/allimg/100402/4.htm" target="_blank">DEMO测试网址</a></strong></p><p><strong>注意：</strong></p><p>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:</p><table align="center" border="0" cellpadding="6" cellspacing="0" style="line-height:22.390625px;" width="95%"> <tbody> <tr> <td>//plugin<br /> jQuery.fn.topLink=function(settings){<br /> settings = jQuery.extend({<br /> min:1, fadeSpeed:200,<br /> ieOffset:50<br /> }, settings);<br /> returnthis.each(function(){<br /> //listen for scroll<br /> var el = $(this);
el.css('display','none');//in case the user forgot
$(window).scroll(function(){<br /> //stupid IE hack<br /> if(!jQuery.support.hrefNormalized){<br /> el.css({<br /> 'position':'absolute',<br /> 'top': $(window).scrollTop()+ $(window).height()- settings.ieOffset<br /> });<br /> }<br /> if($(window).scrollTop()>= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};
$(document).ready(function(){<br /> $('#gototop').topLink({
min:400,
fadeSpeed:500
});
//smoothscroll
$('#gototop').click(function(e){<br /> e.preventDefault();<br /> $.scrollTo(0,300);
});
});</td> </tr> </tbody></table><p>DEMO测试网址</p>