Navigate the Experience

Navigate the Experience using these SDK Methods

setPage

Navigate to a specific page in the experience.

window.wyng['_WYNG_ID_'].setPage('page_12345');

scrollTo

Scroll to a specific component on the experience.

Parameters

Key	Type	Description
componentId	string - required	The id of the component to scroll to, e.g. sign_up_436366175206.
settings	object - optional	Key value pair object containing settings to control the scroll action (optional argument. Default values will be used if not provided
callback	function - optional	Callback function that will be called once the scroll has been completed (optional)

tip

Instead of componentId this method will also work when passing it either a class or id value of an HTML element to scroll to. When using class, the first HTML element with the class that is found will be used to scroll to.

Settings

The following settings can be controlled using the settings argument

Key	Type	Default Value	Description
smooth	string	"easeInOutQuart"	Easing function used for scroll animation. Available animations: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint. See easings.net for visual reference
offset	integer	0	Offset number of px added to the scroll target
duration	integer or function	800	Duration of the scroll animation in milliseconds. Can also be a function (function(scrollDistinceInPx) { return durationInteger; }) to allow for more granular control at runtime
delay	integer	0	Number of milliseconds to wait before starting the scroll animation
isDynamic	boolean	false	Set to true if the distance should be recalculated. Can be used if calculated scroll distance is incorrect (because of expanding/collapsing content etc.)
horizontal	boolean	false	Set to true to invoke a horizontal scroll instead of vertical scroll.

Examples

Scroll To Component

Scroll to the component `sign_up_436366175206`

window.wyng['_WYNG_ID_'].scrollTo('sign_up_436366175206');

Scroll with a delay and offset

In 500 milliseconds scroll to the component `sign_up_436366175206` but offset the scroll by 300 pixels

window.wyng['_WYNG_ID_'].scrollTo('sign_up_436366175206', { offset: 300, delay: 500 });

Scroll with callback

Scroll to the component `sign_up_436366175206` and print a message to the console when the scroll has been completed

window.wyng['_WYNG_ID_'].scrollTo('sign_up_436366175206', {}, () => {
    console.log('Scroll to sign_up_436366175206 has been completed');
});

Scroll with settings and callback

Take 2500 milliseconds to scroll to the component `sign_up_436366175206`, using the 'linear' easing function and print a message once it is done.

window.wyng['_WYNG_ID_'].scrollTo(
    'sign_up_436366175206',
    { duration: 2500, smooth: 'linear' },
    () => {
        console.log('Scroll to sign_up_436366175206 has been completed');
    }
);