{{indexmenu_n>20}}


====== 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. **

V 1.30: The jump to the top is a visual "hard jump", like a normal link to an anchor.


**Update 27.07.2011:**\\
V 1.31: The "hard" jump to the top is replaced by a "smooth scrolling". The user then sees that the page scrolls to the top.

<note>IE6 is not supported!!</note>


**Idea:** gonchuki und Nicolas Sanguinetti [[http://blog.gonchuki.com/archives/usability-101-adding-a-global-back-to-top-to-your-site/]] \\
**complementary:** David Walsh [[http://davidwalsh.name/mootools-watermark|"Top" Watermark Using MooTools]] \\
**Example:** --

\\
{{:deutsch:andere-erweiterungen:mootools:fe_mootools_totop_1.gif|}}

\\

Docu: -- \\
Forum: --


**Author:**  gonchuki und Nicolas Sanguinetti \\
wiki-Author: K.Heermann (flip-flop) http://planmatrix.de) 27.07.2011\\
**CMS Version:** >= 1.4.7 (r4xx) \\ 
**Version:** V1.30 \\
**Update** 27.07.2011 KH to version 1.3.1: The "hard" jump to the top is replaced by a "smooth scrolling". 



Tag: -- \\

**filename:** 
  * template/lib/mootools/plugin-1.2/mootools.back-to-top-1.2.js
  * template/lib/mootools/plugin-1.3/mootools.back-to-top-1.3.js
  * template/img/mootools/ui.totop.png
  * template/inc_css/specific/mootools/back-to-top.css

**Folder:**   template/lib/mootools/plugin-1.2 [plugin-1.3]  


**Condtion:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\
  * $phpwcms['allow_cntPHP_rt']   = 1;
  * JS im Browser eingeschaltet




\\


===== Description: =====


The JS code, the CSS file and the button image is stored in the directories listed above.

  * In the template please select at **JS Library:** ##mootools 1.2 or 1.3##.  
  * In the HTML header of the template the CSS file is loaded with <code html><link rel="stylesheet" type="text/css" href="template/inc_css/specific/mootools/back-to-top.css" /></code>
  * In the template in “MAIN” initialize the JS-Plugins at some point. <code html><!-- JS: back-to-top-1.2 --></code>or<code html><!-- JS: back-to-top-1.3 --></code> 
  * The image for the button is placed in "template/img/mootools/ui.totop.png". 

  * + V 1.31: The MooTools plugin "Fx.Scroll" must be loaded:<code><!-- JS: MORE:Fx/Fx.Scroll --></code>
\\

===== V 1.30 =====


==== Template: ====


{{:deutsch:andere-erweiterungen:mootools:be_mootools_totop_1.gif|}}
\\

\\

==== JS-Code ====

**Version 1.30 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.2
 * released: November 11, 2007
 * last modified: February 27, 2009
 * 
 * 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() {
        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
    });
  });
}

</code>

\\
**Version 1.30 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.2.x
 * 
 * copyright (c) 2007-2009 by gonchuki - http://blog.gonchuki.com
 *                   and Nicolas Sanguinetti - http://nicolassanguinetti.info
 * 
 * version:	1.2
 * released: November 11, 2007
 * last modified: February 27, 2009
 * 
 * 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 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 v1.2  window.addEvent((Browser.Engine.trident ? 'load' : 'domready'), function(){
  window.addEvent((Browser.name == 'ie' ? '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() {
        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
    });
  });
}
</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>

\\

\\

===== CSS =====

**File** ##template/inc_css/specific/mootools/back-to-top.css##

<code css |h back-to-top.css |h>
/**
 * back-to-top: unobtrusive global 'back to top' link using mootools
 * 
 * copyright (c) 2007-2009 by gonchuki - http://blog.gonchuki.com
 *                   and Nicolas Sanguinetti - http://nicolassanguinetti.info
 * 
 * Enhanced by KH 27.07.2011: link button instead of link text. 
 */

#back-to-top {
/*  background: #666 url(../../../img/mootools/triangle-gray-up.png) no-repeat right center; 
	color: #fff;
	font: bold 14px Arial, Helvetica, sans-serif;
	padding: 3px 17px 3px 7px; */

	background:url(../../../img/mootools/ui.totop.png) no-repeat left top;
	margin:10px;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:-999px;
	display:none;
	text-decoration:none;
}

#back-to-top:hover {
	background:url(../../../img/mootools/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}
</code>

\\

===== Download =====


Version 1.30: {{:deutsch:andere-erweiterungen:mootools:mootools_totop_v130.zip|}} 

Version 1.31: {{:deutsch:andere-erweiterungen:mootools:mootools_totop_v131.zip|}} //(with SmoothScroll)//

\\