Question

I don’t have a very good understanding of Javascript so appologies before we start.

I have successfully used Mootools 1.1 to scroll to elements onclick events. I used FX.Scroll as the example here http://demos111.mootools.net/Fx.Scroll and basicly ripped off the demo code.

Note: If you click on one link and then another quickly it immediately stops moving to the first element and scrolls to the second.

I am now trying to use Mootools 1.3 to use the fade efects for a gallery and have used More Builder to get FX.Scroll. It is working BUT when I click on one link and then another straight away, it just continues with the first scroll.

It appears that event.stop is not working.

See example http://www.mytimephotography.co.uk < works
http://www.mytimephotography.co.uk/test < broken

I am using code:

window.addEvent('domready', function () {
  var scroll = new Fx.Scroll('scrollcontainer', {
    wait: false,
    duration: 2000,
    offset: {'x': 0, 'y': 0},
    transition: Fx.Transitions.Quad.easeInOut
  })
  $('link1').addEvent ('click', function(event){
    event = new Event(event).stop();
    scroll.toElement('c1');
  })
  //etc
})

Please view any other source code on the site.

Answer 1

Use the “link” property of the Fx options object. The default is set to “ignore”, which is why the original animation keeps running. Instead, use “chain” if you want it to run after the current animation, or “cancel” if you want it to interrupt the currently running animation.

Alternately, use a faster animation—two seconds is really long! 🙂

var scroll = new Fx.Scroll('scrollcontainer', {
    wait: false,
    duration: 2000,
    offset: {'x': 0, 'y': 0},
    transition: Fx.Transitions.Quad.easeInOut,
    link: 'cancel'
});