NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
english:other-enhancements:mootools:to-top-link [2011/07/29 14:04] Knut Heermann (flip-flop) |
english:other-enhancements:mootools:to-top-link [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | {{indexmenu_n>10}} | + | {{indexmenu_n>20}} |
| - | ====== Back to Top Link ====== | + | ====== Back to Top Link button fade in/out ====== |
| **A Toplink button appears autom. on the side (fade in/out) when approximately 2/3 of the page length is reached by scrolling. ** | **A Toplink button appears autom. on the side (fade in/out) when approximately 2/3 of the page length is reached by scrolling. ** | ||
| Line 216: | Line 216: | ||
| } | } | ||
| </code> | </code> | ||
| + | |||
| + | \\ | ||
| + | |||
| + | \\ | ||
| + | |||
| + | ===== V 1.31 ===== | ||
| + | |||
| + | |||
| + | ==== Template: ==== | ||
| + | |||
| + | |||
| + | {{:deutsch:andere-erweiterungen:mootools:be_mootools_totop_v131_1.gif|}} | ||
| + | |||
| + | \\ | ||
| + | |||
| + | ==== JS-Code ==== | ||
| + | |||
| + | **Version 1.31 for Mootools V1.2**\\ | ||
| + | |||
| + | **File** ##template/lib/mootools/plugin-1.2/mootools.back-to-top-1.2.js## | ||
| + | |||
| + | <code js|h mootools.back-to-top-1.2.js|h> | ||
| + | /** | ||
| + | * -------------------------------------------------------------------------- | ||
| + | * back-to-top: unobtrusive global 'back to top' link using mootools 1.2.x | ||
| + | * | ||
| + | * copyright (c) 2007-2009 by gonchuki - http://blog.gonchuki.com | ||
| + | * and Nicolas Sanguinetti - http://nicolassanguinetti.info | ||
| + | * | ||
| + | * version: 1.3 | ||
| + | * released: November 11, 2007 | ||
| + | * last modified: February 27, 2009 | ||
| + | * version: 1.31 | ||
| + | * last modified: July 28, 2011 KH: http://phpwcms-howto.de | ||
| + | * | ||
| + | * 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 scrollUp = new Fx.Scroll(window); // +KH 28.07.2011 SmoothScroll | ||
| + | |||
| + | 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: 600, | ||
| + | onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')} | ||
| + | }, | ||
| + | 'events': {'click': function() { | ||
| + | // if (window.location.hash) { window.location.hash = '#top'; } | ||
| + | // else { window.scrollTo(0, 0); } | ||
| + | |||
| + | scrollUp.toTop(); //+KH: go to the top; | ||
| + | }} | ||
| + | }).inject(document.body); | ||
| + | |||
| + | |||
| + | window.addEvent('scroll', function() { | ||
| + | var visible = window.getScroll().y > (window.getSize().y * 0.7); | ||
| + | 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 | ||
| + | }); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | </code> | ||
| + | |||
| + | \\ | ||
| + | **Version 1.31 for Mootools V1.3**\\ | ||
| + | |||
| + | **File** ##template/lib/mootools/plugin-1.3/mootools.back-to-top-1.3.js## | ||
| + | |||
| + | |||
| + | |||
| + | <code js|h mootools.back-to-top-1.3.js|h> | ||
| + | /** | ||
| + | * -------------------------------------------------------------------------- | ||
| + | * back-to-top: unobtrusive global 'back to top' link using mootools 1.3.x | ||
| + | * | ||
| + | * copyright (c) 2007-2009 by gonchuki - http://blog.gonchuki.com | ||
| + | * and Nicolas Sanguinetti - http://nicolassanguinetti.info | ||
| + | * | ||
| + | * version: 1.3 | ||
| + | * released: November 11, 2007 | ||
| + | * last modified: February 27, 2009 | ||
| + | * version: 1.31 | ||
| + | * last modified: July 28, 2011 KH: http://phpwcms-howto.de | ||
| + | * | ||
| + | * 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. | ||
| + | //-KH moo v1.2 if (!Browser.Engine.trident4) { | ||
| + | if (!(Browser.name == 'ie' && Browser.version == 6)) { | ||
| + | // 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. | ||
| + | //-KH moo v1.2 window.addEvent((Browser.Engine.trident ? 'load' : 'domready'), function(){ | ||
| + | window.addEvent((Browser.name == 'ie' ? 'load' : 'domready'), function(){ | ||
| + | |||
| + | var scrollUp = new Fx.Scroll(window); // +KH 28.07.2011 SmoothScroll | ||
| + | |||
| + | 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: 600, | ||
| + | onComplete: function(el) { if (el.get('opacity') == 0) el.setStyle('display', 'none')} | ||
| + | }, | ||
| + | 'events': {'click': function() { | ||
| + | // if (window.location.hash) { window.location.hash = '#top'; } | ||
| + | // else { window.scrollTo(0, 0); } | ||
| + | |||
| + | scrollUp.toTop(); //+KH: go to the top; | ||
| + | }} | ||
| + | }).inject(document.body); | ||
| + | |||
| + | |||
| + | window.addEvent('scroll', function() { | ||
| + | var visible = window.getScroll().y > (window.getSize().y * 0.7); | ||
| + | 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 | ||
| + | }); | ||
| + | }); | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | \\ | ||
| \\ | \\ | ||
| Line 268: | Line 438: | ||
| \\ | \\ | ||
| - | ==== Download ==== | + | ===== Download ===== |
| + | Version 1.30: {{:deutsch:andere-erweiterungen:mootools:mootools_totop_v130.zip|}} | ||
| - | {{:deutsch:andere-erweiterungen:mootools:mootools_totop.zip|}} | + | Version 1.31: {{:deutsch:andere-erweiterungen:mootools:mootools_totop_v131.zip|}} //(with SmoothScroll)// |
| \\ | \\ | ||
