CorvidReference

Captcha

Note: This feature is not yet available to all users.

The reCAPTCHA element allows you to present a challenge-response test to site visitors to determine whether they are human or a bot.

Use the reCAPTCHA element to verify that site visitors are human before allowing them to perform restricted operations such as data submission, login, or accessing private content.

Typical reCAPTCHA Validation Lifecycle

The following outlines a typical reCAPTCHA validation lifecycle:

  1. A button or another clickable element that triggers a submit, login, or another restricted operation is disabled, pending reCAPTCHA verification.
  2. A site visitor completes the reCAPTCHA challenge. One of the following occurs:
    • Verification: reCAPTCHA is verified. A reCAPTCHA token is generated. Use the onVerified() event handler to enable the disabled clickable element.
    • Error: reCAPTCHA fails verification. Use the onError() event handler to reset() the reCAPTCHA and ask the visitor to redo the challenge. Return to Step 1.
  3. The clickable element is enabled. One of the following occurs:
    • Click: The site visitor clicks the clickable element, triggering a backend function that calls authorize() with the generated token.
    • Timeout: The site visitor did not click within 120 seconds of token generation, causing the token to expire. When timeout occurs, the reCAPTCHA automatically resets and displays a message asking the site visitor to redo the challenge. Use the onTimeout() event handler to disable the clickable trigger. Return to Step 1.
  4. authorize() checks whether the reCAPTCHA token is valid. One of the following occurs:
    • Authorization: reCAPTCHA is authorized. Perform the restricted operation (such as data insert) in the backend function. reset() the reCAPTCHA for future operations.
    • Error: Token fails authorization. reset() the reCAPTCHA and ask the visitor to redo the challenge. Return to Step 1.

Important: To ensure complete protection, you must include backend authorization as a mandatory step of the reCAPTCHA validation lifecycle.

For more information on working with your reCAPTCHA element, click here.

Note

The reCAPTCHA element does not offer protection for data submission performed via a dataset. To protect data submission with reCAPTCHA, use code to perform the data operation (for example, insert() or save()).

Table of Contents

PROPERTIES

?
Store values associated with an object.
globalIndicates if an element appears on all pages or only on the current page.
idGets the element's ID.
parentGets the element's parent element.
renderedIndicates if an element is currently displayed.
tokenGets the reCAPTCHA token.
typeGets the element's type.

FUNCTIONS

?
Perform actions on an object.
blur( )Removes focus from the element.
focus( )Places focus on the element.
onBlur( )Adds an event handler that runs when the element loses focus.
onError( )Adds an event handler that runs when an error occurs while completing the reCAPTCHA challenge.
onFocus( )Adds an event handler that runs when the element receives focus.
onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

onTimeout( )Adds an event handler that runs when the reCAPTCHA token expires.
onVerified( )Adds an event handler that runs when the reCAPTCHA challenge is successfully completed.
onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

reset( )Resets the reCAPTCHA challenge.
scrollTo( )Scrolls the page to the element using an animation.

MIXES IN

?
Where some functionality is inherited from.
$w.Element, $w.FocusMixin

global

Indicates if an element appears on all pages or only on the current page.

Description

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Syntax

get global(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get whether an element is displayed on all pages

let isGlobal = $w("#myElement").global; // false

id

Gets the element's ID.

Description

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Syntax

get id(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID

let myId = $w("#myElement").id; // "myElement"

parent

Gets the element's parent element.

Description

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

See Also

children

Syntax

get parent(): Node
TYPE
?
The kind of data the property stores.
DEFAULT VALUE
?
The value of a property before you explicitly set it.
null

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the parent element and the parent's ID

let parentElement = $w("#myElement").parent;

let parentId = parentElement.id; // "page1"

rendered

Indicates if an element is currently displayed.

Description

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

An element might not be in the DOM if it is in a slide or a state which is not currently showing.

See Also

collapsed, hidden, isVisible

Syntax

get rendered(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get an element's rendered status

let isRendered = $w("#myElement").rendered;  // true

token

Gets the reCAPTCHA token.

Description

When a site visitor successfully completes a reCAPTCHA challenge, a reCAPTCHA token is generated. The token is used for backend authorization.

Prior to completing the reCAPTCHA challenge and following timeout, the token returns undefined.

Syntax

get token(): string
TYPE
?
The kind of data the property stores.
string

Examples

Get the token of the verified reCAPTCHA

let myToken = $w("#myCaptcha").token;
// "01ABCDeFG23hijKlmn4...OPQ5r6stuvWXy"

Full reCAPTCHA lifecycle scenario

This example demonstrates how to use reCAPTCHA to protect a data insertion. We use a text input for the data, a reCAPTCHA element, and a submit button. The submit button is disabled until the site visitor completes the reCAPTCHA challenge and the reCAPTCHA is verified. Clicking the submit button triggers backend authorization of the token. If authorization is successful, the data is inserted into the collection.

/************************************
 * backend code - submitHandler.jsw *
 ************************************/

import wixCaptcha from 'wix-captcha-backend';
import wixData from 'wix-data';

// Authorize token and insert data
export function processSubmission(submitRequestData) {
  return wixCaptcha.authorize(submitRequestData.token)
    .then (() => {
      return wixData.insert("MyCollection", submitRequestData.data);
    });
}

/********************
 * client-side code *
 ********************/

import {processSubmission} from 'backend/submitHandler';

$w.onReady(function () {
  // When user clicks submit button
  $w("#submitDataButton").onClick(() =>
    let submitRequestData = {
      token: $w("#myCaptcha").token,
      data: $w("#myInput").value,
    }
    processSubmission(submitRequestData) // Call backend function
      .then( () => {
        $w("#myCaptcha").reset();
        $w("#submitDataButton").disable();
        $w("#messageText").text = "Data successfully submitted";
        $w("#messageText").show();
      })
      .catch( () => {
        $w("#myCaptcha").reset();
        $w("#submitDataButton").disable();
        $w("#messageText").text = "Something went wrong. Redo the reCAPTCHA challenge.";
        $w("#messageText").show();
      })
  }

  // Error handler
  $w("#myCaptcha").onError(() => {
    $w("#messageText").text = "Something went wrong. Redo the reCAPTCHA challenge.";
    $w("#messageText").show();
  })

  // Verification handler
  $w("#myCaptcha").onVerified(() => {
    $w("#submitDataButton").enable();
    $w("#messageText").hide();
  })

  // Timeout handler
  $w("#myCaptcha").onTimeout(() => {
    $w("#submitDataButton").disable();
  })
});

type

Gets the element's type.

Syntax

get type(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the element's type

let myType = $w("#myElement").type; // "$w.Type"

blur( )

Removes focus from the element.

Description

The blur() function removes focus from the element and fires a blur event.

The blur event handlers set on this element by the onBlur( ) function or in the Editor are called.

Removing focus through a call to this function is equivalent to a user clicking on another element or tabbing out of the element manually.

If blur() is called on an element that is not in focus, it has no effect. The element in focus remains in focus and the onBlur event handlers are not called.

See Also

onBlur( ), focus( ), onFocus( )

Syntax

function blur(): void

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FocusMixin

Examples

Remove focus from an element

$w("#myElement").blur();

focus( )

Places focus on the element.

Description

The focus() function places focus on the element and fires a focus event.

The focus event handlers set on this element by the onFocus( ) function or in the Editor are called.

Receiving focus through a call to this function is equivalent to a user clicking on or tabbing to the element manually.

See Also

onFocus( ), blur( ), onBlur( )

Syntax

function focus(): void

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FocusMixin

Examples

Place focus on an element

$w("#myElement").focus();

onBlur( )

Adds an event handler that runs when the element loses focus.

Description

An element loses focus (blurs) through user actions, such as clicking and tabbing, or programmatically, using the blur( ) function.

Note

onBlur() has no effect when applied to RadioButtonGroup elements.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

blur( ), onFocus( ), focus( )

Syntax

function onBlur(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element losed focus.

?
Values that you pass to a function.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FocusMixin

Examples

Get the ID of the element that has lost focus

$w("#myElement").onBlur( (event) => {
  let targetId = event.target.id; // "myElement"
});

onError( )

Adds an event handler that runs when an error occurs while completing the reCAPTCHA challenge.

Description

The onError() function allows you to perform actions when the reCAPTCHA element on the client side has a communication error with the reCAPTCHA provider.

If an error occurs, the reCAPTCHA element automatically resets. You can ask the user to redo the challenge.

Syntax

function onError(handler: ErrorHandler): void
callback ErrorHandler(): void
PARAMETERS
?
Values that you pass to a function.
handler
function()

The name of the function or the function expression to run when an error occurs.

Examples

Register a callback to run when an error occurs

$w("#myCaptcha").onError(() => {
  $w("#messageText").text = "Something went wrong. Redo the reCAPTCHA challenge.";
  $w("#messageText").show();
})

onFocus( )

Adds an event handler that runs when the element receives focus.

Description

An element receives focus through user actions, such as clicking and tabbing, or programmatically, using the focus( ) function.

Note

onFocus() has no effect when applied to RadioButtonGroup elements.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

focus( ), onBlur( ), blur( )

Syntax

function onFocus(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element receives focus.

?
Values that you pass to a function.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FocusMixin

Examples

Get the ID of the element that has received focus

$w("#myElement").onFocus( (event) => {
  let targetId = event.target.id; // "myElement"
});

onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved onto the element.

?
Values that you pass to a function.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the mouse event info when the mouse enters an element

$w("#myElement").onMouseIn( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved off of the element.

?
Values that you pass to a function.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the mouse event info when the mouse exits an element

$w("#myElement").onMouseOut( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

onTimeout( )

Adds an event handler that runs when the reCAPTCHA token expires.

Description

The onTimeout() function allows you to perform actions when a reCAPTCHA timeout occurs.

When a site visitor completes a reCAPTCHA challenge, a token is generated. If 120 seconds pass without backend authorization, the token expires and onTimeout() is called.

When a timeout occurs, the reCAPTCHA automatically resets and displays a message asking the site visitor to redo the challenge. If you enabled the clickable element for triggering a restricted operation when the reCAPTCHA was verified, disable it.

Syntax

function onTimeout(handler: TimeoutHandler): void
callback TimeoutHandler(): void
PARAMETERS
?
Values that you pass to a function.
handler
function()

The name of the function or the function expression to run when a reCAPTCHA timeout occurs.

Examples

Register a callback to run when a timeout occurs

$w("#myCaptcha").onTimeout(() => {
  $w("#signupButton").disable();
})

onVerified( )

Adds an event handler that runs when the reCAPTCHA challenge is successfully completed.

Description

Once the reCAPTCHA challenge has been successfully completed by the user, the onVerified callback is triggered and a reCAPTCHA token is generated.

If the clickable element for triggering the submit or another restricted operation was disabled, enable it.

Syntax

function onVerified(handler: VerifiedHandler): void
callback VerifiedHandler(): Promise<void>
PARAMETERS
?
Values that you pass to a function.
handler
function()

The name of the function or the function expression to run when the reCAPTCHA is verified.

Examples

Register a callback to run when the reCAPTCHA is verified

$w("#myCaptcha").onVerified(() => {
  $w("#signupButton").enable();
  let myToken = $w("#myCaptcha").token;
})

Full reCAPTCHA lifecycle scenario

This example demonstrates how to use reCAPTCHA to protect a data insertion. We use a text input for the data, a reCAPTCHA element, and a submit button. The submit button is disabled until the site visitor completes the reCAPTCHA challenge and the reCAPTCHA is verified. Clicking the submit button triggers backend authorization of the token. If authorization is successful, the data is inserted into the collection.

/************************************
 * backend code - submitHandler.jsw *
 ************************************/

import wixCaptcha from 'wix-captcha-backend';
import wixData from 'wix-data';

// Authorize token and insert data
export function processSubmission(submitRequestData) {
  return wixCaptcha.authorize(submitRequestData.token)
    .then (() => {
      return wixData.insert("MyCollection", submitRequestData.data);
    });
}

/********************
 * client-side code *
 ********************/

import {processSubmission} from 'backend/submitHandler';

$w.onReady(function () {
  // When user clicks submit button
  $w("#submitDataButton").onClick(() =>
    let submitRequestData = {
      token: $w("#myCaptcha").token,
      data: $w("#myInput").value,
    }
    processSubmission(submitRequestData) // Call backend function
      .then( () => {
        $w("#myCaptcha").reset();
        $w("#submitDataButton").disable();
        $w("#messageText").text = "Data successfully submitted";
        $w("#messageText").show();
      })
      .catch( () => {
        $w("#myCaptcha").reset();
        $w("#submitDataButton").disable();
        $w("#messageText").text = "Something went wrong. Redo the reCAPTCHA challenge.";
        $w("#messageText").show();
      })
  }

  // Error handler
  $w("#myCaptcha").onError(() => {
    $w("#messageText").text = "Something went wrong. Redo the reCAPTCHA challenge.";
    $w("#messageText").show();
  })

  // Verification handler
  $w("#myCaptcha").onVerified(() => {
    $w("#submitDataButton").enable();
    $w("#messageText").hide();
  })

  // Timeout handler
  $w("#myCaptcha").onTimeout(() => {
    $w("#submitDataButton").disable();
  })
});

onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

Description

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window. onViewportEnter() is not fired for hidden or collapsed elements even if they are scrolled into view.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportLeave( )

Syntax

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element enters the viewport.

?
Values that you pass to a function.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID of the element that has entered the viewport

$w("#myElement").onViewportEnter( (event) => {
  let targetId = event.target.id; // "myElement"
});

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

Description

An element leaves the viewport when the page is scrolled so that the element is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window. onViewportLeave() is not fired for hidden or collapsed elements even if they are scrolled out of view.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportEnter( )

Syntax

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
Values that you pass to a function.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element leaves the viewport.

?
Values that you pass to a function.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Get the ID of the element that has left the viewport

$w("#myElement").onViewportLeave( (event) => {
  let targetId = event.target.id; // "myElement"
});

reset( )

Resets the reCAPTCHA challenge.

Description

reset() the reCAPTCHA when there is a reCAPTCHA error. Also use reset() when the operation restricted by the reCAPTCHA element is successfully completed to enable the reCAPTCHA for the next operation.

Syntax

function reset(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the reCAPTCHA has been reset.

Examples

Reset the reCAPTCHA element

$w("#myCaptcha").reset();

Full reCAPTCHA lifecycle scenario

This example demonstrates how to use reCAPTCHA to protect a data insertion. We use a text input for the data, a reCAPTCHA element, and a submit button. The submit button is disabled until the site visitor completes the reCAPTCHA challenge and the reCAPTCHA is verified. Clicking the submit button triggers backend authorization of the token. If authorization is successful, the data is inserted into the collection.

/************************************
 * backend code - submitHandler.jsw *
 ************************************/

import wixCaptcha from 'wix-captcha-backend';
import wixData from 'wix-data';

// Authorize token and insert data
export function processSubmission(submitRequestData) {
  return wixCaptcha.authorize(submitRequestData.token)
    .then (() => {
      return wixData.insert("MyCollection", submitRequestData.data);
    });
}

/********************
 * client-side code *
 ********************/

import {processSubmission} from 'backend/submitHandler';

$w.onReady(function () {
  // When user clicks submit button
  $w("#submitDataButton").onClick(() =>
    let submitRequestData = {
      token: $w("#myCaptcha").token,
      data: $w("#myInput").value,
    }
    processSubmission(submitRequestData) // Call backend function
      .then( () => {
        $w("#myCaptcha").reset();
        $w("#submitDataButton").disable();
        $w("#messageText").text = "Data successfully submitted";
        $w("#messageText").show();
      })
      .catch( () => {
        $w("#myCaptcha").reset();
        $w("#submitDataButton").disable();
        $w("#messageText").text = "Something went wrong. Redo the reCAPTCHA challenge.";
        $w("#messageText").show();
      })
  }

  // Error handler
  $w("#myCaptcha").onError(() => {
    $w("#messageText").text = "Something went wrong. Redo the reCAPTCHA challenge.";
    $w("#messageText").show();
  })

  // Verification handler
  $w("#myCaptcha").onVerified(() => {
    $w("#submitDataButton").enable();
    $w("#messageText").hide();
  })

  // Timeout handler
  $w("#myCaptcha").onTimeout(() => {
    $w("#submitDataButton").disable();
  })
});

scrollTo( )

Scrolls the page to the element using an animation.

Description

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is now in view.

To scroll to a specific location on the page, see the wix-window scrollTo() function.

Calling the scrollTo() function on an element in a repeated item that is selected from the global scope causes an error.

Syntax

function scrollTo(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the scroll is complete.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Element

Examples

Scroll the page to an element

$w("#myElement").scrollTo();

Scroll the page to an element and log message when done

$w("#myElement").scrollTo()
  .then( ( ) => {
    console.log("Done with scroll");
} );