[[Back to Top Link button fade in/out]]
You are here: Willkommen im phpwcms-HowTo:wiki » Documentation (EN) » other enhancements » MooTools » Back to Top Link button fade in/out
Show pagesourceOld revisions
Recent changesIndex

NAVIGATION

Imprint / Impressum

Please Donate!

With your donation you accelerate more enhancements of the wiki.

Table of Contents

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 "Top" Watermark Using MooTools
Example: –



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: → /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 
    <link rel="stylesheet" type="text/css" href="template/inc_css/specific/mootools/back-to-top.css" />
  • In the template in “MAIN” initialize the JS-Plugins at some point. 
    <!-- JS: back-to-top-1.2 -->

    or 

    <!-- JS: back-to-top-1.3 -->
  • 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:
    <!-- JS: MORE:Fx/Fx.Scroll -->


V 1.30

Template:



JS-Code

Version 1.30 for Mootools V1.2

File template/lib/mootools/plugin-1.2/mootools.back-to-top-1.2.js

mootools.back-to-top-1.2.js

/**
 * 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
    });
  });
}


Version 1.30 for Mootools V1.3

File template/lib/mootools/plugin-1.3/mootools.back-to-top-1.3.js

mootools.back-to-top-1.3.js

/**
 * 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
    });
  });
}



V 1.31

Template:


JS-Code

Version 1.31 for Mootools V1.2

File template/lib/mootools/plugin-1.2/mootools.back-to-top-1.2.js

mootools.back-to-top-1.2.js

/**
 * --------------------------------------------------------------------------
 * 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
        });
    });
}


Version 1.31 for Mootools V1.3

File template/lib/mootools/plugin-1.3/mootools.back-to-top-1.3.js

mootools.back-to-top-1.3.js

/**
 * --------------------------------------------------------------------------
 * 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
        });
    });
}



CSS

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

back-to-top.css

/**
 * 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);
}


Download

Version 1.30: mootools_totop_v130.zip (42.63 KiB, 86 downloads)

Version 1.31: mootools_totop_v131.zip (42.85 KiB, 116 downloads) (with SmoothScroll)


english/other-enhancements/mootools/to-top-link.txt · Last modified: 2018/06/03 18:09 (external edit)
Show pagesourceOld revisions
Back to top
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0