[[Back to Top Link Knopf fade in/out]]
You are here: Willkommen im phpwcms-HowTo:wiki » Benutzerhandbuch (DE) » Andere Erweiterungen » Mootools » Back to Top Link Knopf 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 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.

V 1.30: Der Sprung an den Seitenanfang ist als optischer “harter Sprung ausgebildet”, wie bei einem normalen Link zu einem Anker.

Update 27.07.2011:
V 1.31 Der “harte” Sprung zum Seitenanfang wird durch ein “SmoothScroll” ersetzt. Der User sieht also dass die Seite nach oben rollt.

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



Docu: –
Forum: –

Autor: gonchuki und Nicolas Sanguinetti
wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de) 27.07.2011
CMS Version: >= 1.4.7 (r4xx)
Version: V1.30
Update 27.07.2011 KH nach Version 1.3.1: Der “harte” Sprung zum Seitenanfang wird durch ein “SmoothScroll” ersetzt.

Tag: –

Dateinamen: * 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

Verzeichnis: template/lib/mootools/plugin-1.2 [plugin-1.3]

Bedingung: → /config/phpwcms/conf.inc.php

  • $phpwcms['allow_cntPHP_rt'] = 1;
  • JS im Browser eingeschaltet


Beschreibung:

Der JS-Code, die CSS-Datei und das Buttonbild werden in den oben angegebenen Verzeichnissen abgelegt.

  • In der betreffenden Vorlage wird bei JS Bibliothek: mootools 1.2 oder 1.3 gewählt.
  • Im HTML-Kopf der Vorlage wird die CSS-Datei geladen mit 
    <link rel="stylesheet" type="text/css" href="template/inc_css/specific/mootools/back-to-top.css" />
  • In der Vorlage werden in “HAUPT:” an irgendeiner Stelle die JS-Plugins initialisiert 
    <!-- JS: back-to-top-1.2 -->

    oder 

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


V 1.30

Vorlage:



JS-Code

Version für Mootools V1.2

Datei 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 für Mootools V1.3

Datei 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

Vorlage:

JS-Code

Version 1.31 für Mootools V1.2

Datei 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 für Mootools V1.3

Datei 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

Datei 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) (mit SmoothScroll)


deutsch/andere-erweiterungen/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