to( )

Directs the browser to navigate to the specified URL.

Description

The to() function navigates the browser to another web page.

The to() function can only be used when browser rendering happens, meaning you can only use it in frontend code after the page is ready.

The following link patterns are supported:

/localPageURL: Another page on your site.
/localPageURL#<velo-element-id>: Another page on your site scrolled to the element with the specified ID. The element must be an element that supports the scrollTo function.
/localPageURL?queryParam=value: Another page on your site with query parameters.
/: Your site's home page.
http(s)://<url>: An external web address.
wix:document://<location>: A document stored in the Media Manager.
mailto:<address>@<someplace.com>?subject=<subject>: An email.
tel:<phone number>: A phone number.

To find the local URL of a page on your site in the Editor:

Regular page: See the SEO tab of the Page Settings panel.
Dynamic page: See the Page Info tab of the Page Settings panel for the URL structure. The actual URL used for navigation needs to contain values where the placeholders are.
For example, if the URL structure of your dynamic page looks like:
and you have an item with the title "Waffles", the local URL to that page is /Recipes/Waffles.
Router page: You cannot navigate directly to a specific router page. You can navigate to a URL with the router's prefix and the router code decides which page to route to.

By default, when navigating to a new URL for a Wix page, the page scrolls to the top. Set the disableScrollToTop navigation parameter property to true if you want the page to remain at the current Y-axis position as the previously-viewed page.

The to() function attempts to properly encode the URL parameter that is passed to it. For example, .../some page is encoded to .../some%20page. However, some URLs do not have one unambiguous encoding. In those cases it is up to you to encode the URL to reflect your intentions. Because of these situations, it is a best practice to always encode URLs before you pass them to the to() function.

Note that Wix URLs do not contain spaces. A page which has spaces in its name has its spaces replaced with dashes (-). Similarly, a dynamic page whose URL contains the value of a field in your collection with spaces has its spaces replaced with dashes (-).

Note: The to() function does not work while previewing your site.

Syntax

function to(url: string, [options: NavOptions]): void

to Parameters

NAME

TYPE

DESCRIPTION

url

string

The URL of the page or website to navigate to.

options

Optional

NavOptions

Options to use when navigating to the specified URL, such as scrolling options.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Navigate to a local link

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.to("/about-me");

Navigate to a local link, without automatically scrolling to the top

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5const options = {
6  disableScrollToTop: true
7};
8
9wixLocationFrontend.to("/about-me", options);

Navigate to a local link and scroll to an element

This example assumes you have a page named Long Page that has an element with the ID downUnder.

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.to("/long-page#downUnder");
6

Navigate to an external web link

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.to("http://wix.com");

Open a new email window

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.to("mailto:a@b.com?subject=Something%20Intersting");

Open a document

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.to("wix:document://v1/9bec_52fb06ea/filename.xls");

Make a phone call

Copy Code

1import wixLocationFrontend from 'wix-location-frontend';
2
3// ...
4
5wixLocationFrontend.to("tel:+1-555-555-5555");