Mootools 1.2教程

当前位置:首页>Mootools>Mootools 1.2教程>网页教程:页面返回顶部锚点按钮的设计

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

时间:2015-07-14 12:06来源:网络整理 作者:KKWL 点击:
网页制作poluoluo文章简介:滑动效果的返回顶部锚点按钮. 对于版面较长的网页,在底部会放上返回顶部的锚点链接,做法也很简单,直接用HTML就能实现,不过这种效果不交呆板,原因

网页制作poluoluo文章简介:滑动效果的返回顶部锚点按钮.

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

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

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

这时候有三种情况发生:

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

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

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

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

The HTML :

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

The JavaScript :

/** * 作者:我是UED , * 回到页面顶部 * @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’默认是隐藏的,只要滚动条,滚动到一定高度时就显示,否则就隐藏。

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

The HTML :

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

The MooTools JavaScript : 注意: 我们需要MooTools Core 库的同时,也需要MooTools More 库中的 Fx.Scroll.js 和 Fx.SmoothScroll.js 两大文件。

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’。

The MooTools JavaScript :

/** * 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. * */   // 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则可以用来获取或设置页面的标签值。比如 #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 }); }); }

The jQuery JavaScript :

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

------分隔线----------------------------