Differences

This shows you the differences between two versions of the page.

--- deutsch:andere-erweiterungen:mootools:to-top-link [2011/07/27 09:29]
Knut Heermann (flip-flop)
+++ deutsch:andere-erweiterungen: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 Knopf fade in/out ======
 **Ein Toplink Button erscheint autom. auf der Seite (fade in/out) wenn etwa 2/3 der Seitenlänge durch das Scrollen erreicht sind. **
-&lt;del&gt;Der "harte" Sprung zum Seitenanfang wird durch ein "SmoothScroll" ersetzt. Der User sieht also dass die Seite nach oben rollt.</del>
+V 1.30: Der Sprung an den Seitenanfang ist als optischer &quot;harter Sprung ausgebildet&quot;, wie bei einem normalen Link zu einem Anker.
-\\
-\\
+**Update 27.07.2011:**  \\
-Idee: gonchuki und Nicolas Sanguinetti [[http://blog.gonchuki.com/archives/usability-101-adding-a-global-back-to-top-to-your-site/]] \\
+V 1.31 Der "harte" Sprung zum Seitenanfang wird durch ein "SmoothScroll" ersetzt. Der User sieht also dass die Seite nach oben rollt.
-Ergänzend: David Walsh [[http://davidwalsh.name/mootools-watermark|"Top" Watermark Using MooTools]] \\
-Beispiel: --
+<note>IE6 wird nicht unterstützt!!</note>
+**Idee:** gonchuki und Nicolas Sanguinetti [[http://blog.gonchuki.com/archives/usability-101-adding-a-global-back-to-top-to-your-site/]] \\
+**Ergänzend:** David Walsh [[http://davidwalsh.name/mootools-watermark|"Top" Watermark Using MooTools]] \\
+**Beispiel:** --
 \\
@@ Line 23: / Line 27: @@
 **Autor:**  gonchuki und Nicolas Sanguinetti \\
-wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de) \\
+wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de) 27.07.2011\\
 **CMS Version:** >= 1.4.7 (r4xx) \\
-**Version:** V1.0 \\
+**Version:** V1.30 \\
+**Update** 27.07.2011 KH nach Version 1.3.1: Der "harte" Sprung zum Seitenanfang wird durch ein "SmoothScroll" ersetzt. \\
@@ Line 60: / Line 65: @@
   * Das Bild für den Button wird in "template/img/mootools/ui.totop.png" abgelegt.
+  * + V 1.31: Das MooTools Plugin "Fx.Scroll" muss hinzugeladen werden: <code html><!-- JS: MORE:Fx/Fx.Scroll --></code>
 \\
+===== V 1.30 =====
 ==== Vorlage: ====
@@ Line 70: / Line 79: @@
 \\
-===== JS-Code =====
+==== JS-Code ====
 **Version für Mootools V1.2**\\
@@ Line 205: / Line 215: @@
 }
 </code>
+\\
+===== V 1.31 =====
+==== Vorlage: ====
+{{:deutsch:andere-erweiterungen:mootools:be_mootools_totop_v131_1.gif|}}
+==== JS-Code ====
+**Version 1.31 für Mootools V1.2**\\
+**Datei** ##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 für Mootools V1.3**\\
+**Datei** ##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 257: / Line 433: @@
 \\
-==== 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|}} //(mit SmoothScroll)//
 \\

deutsch/andere-erweiterungen/mootools/to-top-link.1311751764.txt.gz · Last modified: 2018/06/03 18:07 (external edit)

Show page Old revisions