{{indexmenu_n>30}}


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




\\


===== Beschreibung: =====


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 <code html><!-- JS: SmoothScrollToTop-1.2 --></code>oder<code html><!-- JS: SmoothScrollToTop-1.3 --></code> 

  * Die MooTools Plugins "Fx.Scroll" und "Fx.SmoothScroll" müssen hinzugeladen werden: <code html><!-- JS: MORE:Fx/Fx.Scroll,Fx/Fx.SmoothScroll --></code>

  * An den Anfang der Seite wird der top-Anker mit <code html><a id="top" name="top"></a></code>gesetzt. 
  * Ein Aufruf des Ankers wird mit <code html><a href="#top"></code> gesetzt. (Im CMS kann in jedem CP dieser Aufruf durch den Schalter "Top-Link: [x]" automatisch generiert werden).

\\




==== Vorlage: ====

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

\\

==== JS-Code ====

**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##

<code js|h mootools.back-to-top-1.2.js oder mootools.back-to-top-1.3.js |h>
/**
 * --------------------------------------------------------------------------
 * 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
});

</code>



\\


===== Download =====


Version 1.0: {{:deutsch:andere-erweiterungen:mootools:smooth_scroll_to_top.zip|}}



\\