Smooth Scroller zu einem top Anker

Standardmäßig springt der Fokus im Browser nach oben oder unten in die Seite, wenn Sie auf einen Anker klicken. Mit SmoothScroll wird die Seite weich nach oben oder unten gescrollt wenn auf einen Ankerlink geklickt wird.

Idee: David Walsh - http://davidwalsh.name/smooth-scroll-mootools
Beispiel: –

Docu: –
Forum: –

Autor: David Walsh - http://davidwalsh.name/smooth-scroll-mootools
wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de) 27.07.2011
CMS Version: >= 1.4.7 (r4xx)
Version: V1.0

Tag: –

Dateinamen: * template/lib/mootools/plugin-1.2/mootools.SmoothScrollToTop-1.2.js

• template/lib/mootools/plugin-1.3/mootools.SmoothScrollToTop-1.3.js

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

Der JS-Code wird in den oben angegebenen Verzeichnissen abgelegt.

• In der betreffenden Vorlage wird bei JS Bibliothek: mootools 1.2 oder 1.3 gewählt.
• In der Vorlage wird in “HAUPT:” an irgendeiner Stelle das JS-Plugin initialisiert

  <!-- JS: SmoothScrollToTop-1.2 -->

  oder

  <!-- JS: SmoothScrollToTop-1.3 -->

• Die MooTools Plugins “Fx.Scroll” und “Fx.SmoothScroll” müssen hinzugeladen werden:

  <!-- JS: MORE:Fx/Fx.Scroll,Fx/Fx.SmoothScroll -->

• An den Anfang der Seite wird der top-Anker mit

  <a id="top" name="top"></a>

  gesetzt.

• Ein Aufruf des Ankers wird mit

  <a href="#top">

  gesetzt. (Im CMS kann in jedem CP dieser Aufruf durch den Schalter “Top-Link: [x]” automatisch generiert werden).

Version für Mootools V1.2- und V1.3

Datei template/lib/mootools/plugin-1.2/mootools.SmoothScrollToTop-1.2.js
Datei template/lib/mootools/plugin-1.3/mootools.SmoothScrollToTop-1.3.js

/**
 * --------------------------------------------------------------------------
 * smooooooth scrolling using mootools 1.2/3.x
 *
 * author: David Walsh - http://davidwalsh.name/smooth-scroll-mootools
 *
 * version:    1.0
 * released: Wednesday, April 23, 2008
 *
 * --------------------------------------------------------------------------
 */
 
//when the dom is ready
window.addEvent('domready',function() {
    //smooooooth scrolling enabled
    //new SmoothScroll({ options }, window);
    new Fx.SmoothScroll({ duration:600 }, window); //700 milliseconds to get there
});

Version 1.0: smooth_scroll_to_top.zip (1.56 KiB, 98 downloads)