Smooth Scroller to a top anchor

By default, the browser “jerks” you up or down in the page when you click on an anchor – SmoothScroll lets you define the duration that it should take for a link to be scrolled down to.

Idea: David Walsh - http://davidwalsh.name/smooth-scroll-mootools
Example: –

Docu: –
Forum: –

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

Tag: –

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

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

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

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

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

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 oder 1.3.
• In the template in “MAIN” initialize the JS-Plugins at some point.

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

  oder

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

• The MooTools plugin “Fx.Scroll” und “Fx.SmoothScroll” must be loaded:

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

• At the top of the page the top anchor is set with

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

  .

• A call to the anchor is set with

  <a href="#top">

  . (This call will be generated automatically in each CP with the switch “Top-Link: [x]”).

Version for Mootools V1.2- und V1.3

File template/lib/mootools/plugin-1.2/mootools.SmoothScrollToTop-1.2.js
File 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)