Sandbox: JavaScript

Scrolls an element (or the window) to an element. Can scroll the element to the top, center, or bottom.

Examples

Scroll to the top element Scroll to the middle element Scroll to the bottom element

  • The top element
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • The middle element (to the center)
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • blarg
  • The last element
<p>
    <a href="#first" class="btn btn-default" data-trigger="scrollToElement" data-scrolltoelement-options="
      'target': '!div ul'
    ">Scroll to the top element</a>

    <a href="#middle" class="btn btn-default" data-trigger="scrollToElement" data-scrolltoelement-options="
      'target': '!div ul',
      'scrollMethod': 'toElementCenter'
    ">Scroll to the middle element</a>

    <a href="#last" class="btn btn-default" data-trigger="scrollToElement" data-scrolltoelement-options="
      'target': '!div ul'
    ">Scroll to the bottom element</a>
  </p>

  <ul style="height: 120px; overflow: auto">
    <li id="first">The top element</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li id="middle">The middle element (to the center)</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li>blarg</li>
    <li id="last">The last element</li>
  </ul>

Behavior Options

These options apply only to the data- tag invocation.

Name type default description
target string 'window' Selector to find the element to scroll. 'window' (the default) is a special property that instructs the component to scroll the document body. Can also be 'self'.
toElement string ~ Selector to find the element to scroll to. If not defined, uses the href of the trigger element to find the element by id (e.g. would scroll to the element with the id "foo").
scrollMethod string 'toElement' One of 'toElement', 'toElementEdge' or 'toElementCenter' (see MooTools Fx.Scroll docs below)
axes Array or String ['x', 'y'] An array or string specifying which axes to scroll on, can be 'x', 'y', or ['x', 'y']. It defaults to both axes.
offset object {'x': 0, 'y': 0} An object with x and y properties of the distance to scroll to within the Element.

Related Documentation

Note: Not all links in these work.

Class: Fx.Scroll

Scrolls any element with an overflow, including the window element.

Note

Extends

Fx.Scroll Method: constructor

Syntax

var myFx = new Fx.Scroll(element[, options]);

Arguments

  1. element - (mixed) A string of the id for an Element or an Element reference to scroll.
  2. options - (object, optional) All Fx Options in addition to offset and wheelStops.

Options:

  1. offset - (object: defaults to {'x': 0, 'y': 0}) An object with x and y properties of the distance to scroll to within the Element.
  2. wheelStops - (boolean: defaults to true) If false, the mouse wheel will not stop the transition from happening.

Returns

  • (object) A new Fx.Scroll instance.

Examples

var myFx = new Fx.Scroll('myElement', {
    offset: {
        x: 0,
        y: 100
    }
}).toTop();

Notes

  • Fx.Scroll transition will stop on mousewheel movement if the wheelStops option is not set to false. This is to allow users to control their web experience.
  • Fx.Scroll is useless for Elements without scrollbars.

Fx.Scroll Method: set

Scrolls the specified Element to the x/y coordinates immediately.

Syntax

myFx.set(x, y);

Arguments

  1. x - (number) The x coordinate to scroll the Element to.
  2. y - (number) The y coordinate to scroll the Element to.

Returns

  • (object) This Fx.Scroll instance.

Examples

var myElement = $(document.body);
var myFx = new Fx.Scroll(myElement).set(0, 0.5 * document.body.offsetHeight);

Fx.Scroll Method: start

Scrolls the specified Element to the x/y coordinates provided.

Syntax

myFx.start(x, y);

Arguments

  1. x - (number) The x coordinate to scroll the Element to.
  2. y - (number) The y coordinate to scroll the Element to.

Returns

  • (object) This Fx.Scroll instance.

Examples

var myElement = $(document.body);
var myFx = new Fx.Scroll(myElement).start(0, 0.5 * document.body.offsetHeight);

Notes

  • Scrolling to negative coordinates is impossible.

Fx.Scroll Method: toTop

Scrolls the specified Element to its maximum top.

Syntax

myFx.toTop();

Returns

  • (object) This Fx.Scroll instance.

Examples

//Scrolls "myElement" 200 pixels down from its top and, after 1.5 seconds,
//back to the top.
var myFx = new Fx.Scroll('myElement', {
    onComplete: function(){
        this.toTop.delay(1500, this);
    }
}).scrollTo(0, 200).chain(function(){
    this.scrollTo(200, 0);
});

Fx.Scroll Method: toBottom

Scrolls the specified Element to its maximum bottom.

Syntax

myFx.toBottom();

Returns

  • (object) This Fx.Scroll instance.

Examples

//Scrolls the window to the bottom and, after one second, to the top.
var myFx = new Fx.Scroll(window).toBottom().chain(function(){
    this.toTop.delay(1000, this);
});

Fx.Scroll Method: toLeft

Scrolls the specified Element to its maximum left.

Syntax

myFx.toLeft();

Returns

  • (object) This Fx.Scroll instance.

Examples

//Scrolls "myElement" 200 pixels to the right and then back.
var myFx = new Fx.Scroll('myElement').scrollTo(200, 0).chain(function(){
    this.toLeft();
});

Fx.Scroll Method: toRight

Scrolls the specified Element to its maximum right.

Syntax

myFx.toRight();

Returns

  • (object) This Fx.Scroll instance.

Examples

//Scrolls "myElement" to the right edge and then to the bottom.
var myFx = new Fx.Scroll('myElement', {
    duration: 5000,
    wait: false
}).toRight();

myFx.toBottom.delay(2000, myFx);

Fx.Scroll Method: toElement

Scrolls the element until the element specified is at the top/left. If an axis is specified, only scrolls along that axis.

Syntax

myFx.toElement(el[, axes]);

Arguments

  1. el - (mixed) A string of the Element's id or an Element reference to scroll to.
  2. axes - (array or string, optional) An array or string specifying which axes to scroll on, can be 'x', 'y', or ['x', 'y']. It defaults to both axes.

Returns

  • (object) This Fx.Scroll instance.

Examples

//Scrolls the "myElement" to the top left corner of the window.
var myFx = new Fx.Scroll(window).toElement('myElement');

//Scrolls the "myElement" to the top corner of the window.
//Does not scroll horizontally.
var myFx = new Fx.Scroll(window).toElement('myElement', 'y');

Notes

Fx.Scroll Method: toElementEdge

Scrolls the element until the specified element is visible along the specified axes.

Syntax

myFx.toElementEdge(el[, axes]);

Arguments

  1. el - (mixed) A string of the Element's id or an Element reference to scroll to.
  2. axes - (array or string, optional) An array or string specifying which axes to scroll on, can be 'x', 'y', or ['x', 'y']. It defaults to both axes.

Returns

  • (object) This Fx.Scroll instance.

Examples

//Scrolls the window until "myElement" is visible, scrolling in whatever direction
//is required.
var myFx = new Fx.Scroll(window).toElementEdge('myElement');

//Same as above but only scrolls the window up or down.
var myFx = new Fx.Scroll(window).toElementEdge('myElement', 'y');

Fx.Scroll Method: toElementCenter

Scrolls the element until the specified element is centered along the specified axes.

Syntax

myFx.toElementCenter(el[, axes]);

Arguments

  1. el - (mixed) A string of the Element's id or an Element reference to scroll to.
  2. axes - (array or string, optional) An array or string specifying which axes to scroll on, can be 'x', 'y', or ['x', 'y']. It defaults to both axes.

Returns

  • (object) This Fx.Scroll instance.

Examples

//Scrolls the window until "myElement" is centered in the window,
//scrolling in whatever direction is required.
var myFx = new Fx.Scroll(window).toElementCenter('myElement');

//Same as above but only scrolls the window up or down.
var myFx = new Fx.Scroll(window).toElementCenter('myElement', 'y');