ScrollTo

Animated native scrolling to node or coordinate.

Functions

Util.scrollTo

Definition

Name
Util.scrollTo
Syntax
Void = Util.scrollTo( Node node, JSON _options );

Description

Scroll node to position of node or specified x,y coordinate.

Cancels scroll animation if user attempts to scroll midway.

Method used native scrollTo with behaviour:smooth if available.

Parameters

node
Node node to scroll
_option
JSON Options for scrolling
Options
callback
Name of callback function on successful scroll (default: scrolledTo)
callback_cancelled
Name of callback function on cancelled scroll (default: scrollToCancelled)
node
Node to scroll to
x
X coordinate to scroll to
y
Y coordinate to scroll to
offset_x
Offset for vertical scrolling
offset_y
Offset for horisontal scrolling

Return values

Void

Callbacks

Note: Callbacks are not fired when using native scrollTo with behaviour:smooth.

window.scrolledTo()
when scrolling is done successfully
window.scrollToCancelled()
If scrolling was interupted

Examples

<div class="scene"> <div class="header on"></div> <div class="footer"></div> </div> <script> var footer = u.querySelector(".footer"); u.scrollTo({"node":footer, "offset_y":100); </script>

Scrolls to "footer" -100px.

See the test page for extended example.

Dependencies

JavaScript
  • typeof
  • for ... in
  • case ... switch
Manipulator
  • Util.scrollX
  • Util.scrollY
  • Util.absX
  • Util.absY
  • Util.setTimer
  • Util.resetTimer

Files

Main file

  • u-scrollto.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-scrollto.js + u-events.js + u-timer.js + u-geometry.js
desktop_ie11
u-scrollto.js + u-events.js + u-timer.js + u-geometry.js
desktop
u-scrollto.js + u-events.js + u-timer.js + u-geometry.js
desktop_ie10
u-scrollto.js + u-events.js + u-timer.js + u-geometry.js
desktop_ie9
u-scrollto.js + u-events.js + u-timer.js + u-geometry.js
desktop_light
u-scrollto.js + u-events-desktop_light.js + u-timer.js + u-geometry.js u-geometry-desktop_light.js
tablet
u-scrollto.js + u-events.js + u-timer.js + u-geometry.js
tablet_light
u-scrollto.js + u-events.js + u-timer.js + u-geometry.js
smartphone
u-scrollto.js + u-events.js + u-timer.js + u-geometry.js
mobile
not tested
mobile_light
not tested
tv
u-scrollto.js + u-events.js + u-events-desktop_light.js + u-timer.js + u-geometry.js u-geometry-desktop_light.js
seo
not supported