1. Overview

The Scroll To task moves the page during test execution to bring a target into view. It can scroll in two ways:

1. Scrolling to a target - Scrolls the page to an element's locator, a set of pixel coordinates, or a general area such as the top, bottom or center of the page.
2. Scrolling an element into position - Targets a specific element and brings it to the specified position, such as the top or center. If the specified element is inside a scrollable container, that container scrolls internally to reach the position. Otherwise, the page itself scrolls to bring the element into place.

Since Scroll To task only performs the scroll, follow it with an assertion to confirm the target is visible and ready for the next action, such as a click task.

Note: Scroll To operates only within the current browsing context. An element inside an iframe sits in a separate context from the main page, so switch into that iframe with the Switch To task before scrolling to elements inside it.

2. Syntax

2.1 Scrolling using a single input

scrollTo(<scroll_input>);

2.2 Scrolling to bring an element into position

scrollTo(<locator>, <position>);

Parameter	Data Type	Description
locator	STRING	Identifies the element to scroll to. If the locator points to a scrollable container, that container scrolls internally to bring the specified position into view. If the locator points to an ordinary element that isn't itself scrollable, the page scrolls instead, bringing that element to the specified position. Note: Locators can be found by manually inspecting the webpage for the element, or by using an element already saved through a recording session. Learn more about Elements.
position	STRING	Specifies where to align the target element within the viewport. Applicable values: position.TOP position.BOTTOM position.CENTER position.LEFT position.RIGHT

3. Examples

The Add to Cart button on the Diver Chronomat page sits further down than what's visible on load of the webpage, so the page needs to scroll to it before the button can be clicked.

// Open the Diver Chronomat product page on the ZWatch Commerce website using the Open URL task
openURL("https://zwatch.zohocommerce.com/products/diver-chronomat/3531661000000075722", "same window");
// Scroll to the Add to Cart button using the Scroll To task
scrollTo(".theme-product-qty-and-add-cart");
// Confirm the Add to Cart button is visible using the Assert Visible task
assertVisible(".theme-product-qty-and-add-cart", errorhandling.STOP_ON_ERROR);
// Click the Add to Cart button using the Click task
click(".theme-product-qty-and-add-cart");

where:

A promotional banner on the home page sits at a fixed pixel position, so scrolling to its exact coordinates brings it into view.

// Open the ZWatch Commerce home page using the Open URL task
openURL("https://zwatch.zohocommerce.com/", "same window");
// Scroll to the promotional banner's pixel position using the Scroll To task
scrollTo("x:0, y:600");
// Confirm the promotional banner is visible using the Assert Visible task
assertVisible(".theme-promo-banner", errorhandling.STOP_ON_ERROR);

where:

Reaching the end of the product listing on the shop page requires scrolling all the way to the bottom.

// Open the ZWatch Commerce home page using the Open URL task
openURL("https://zwatch.zohocommerce.com/", "same window");
// Click the link to the shop page using the Click task
click("a[href*='all-products']");
// Scroll to the bottom of the page using the Scroll To task
scrollTo(position.BOTTOM);
// Confirm the pagination control at the end of the listing is visible using the Assert Visible task
assertVisible(".theme-pagination", errorhandling.STOP_ON_ERROR);

where:

The reviews section on the Blue Bay GMT product page sits further down the page, so scrolling it into position at the top of the viewport brings it fully into view before its content is checked.

// Open the Blue Bay GMT product page on the ZWatch Commerce website using the Open URL task
openURL("https://zwatch.zohocommerce.com/products/blue-bay-gmt/3531661000000075668", "same window");
// Scroll the reviews section into position at the top of the viewport using the Scroll To task
scrollTo("#zpview_rating", position.TOP);
// Confirm the reviews section is visible using the Assert Visible task
assertVisible("#zpview_rating", errorhandling.STOP_ON_ERROR);

where:

Scroll a chat widget's message history to its most recent message, where the message list sits inside its own scrollable container within an embedded iframe.

// Open the support page using the Open URL task
openURL("<website_name>/<support_page>", "same window");
// Switch into the chat widget's iframe using the Switch To task
switchTo("iframe.chat-widget-frame", True);
// Scroll the message history container to its most recent message using the Scroll To task
scrollTo(ui.<support_page>.<chat_message_history>, position.BOTTOM);
// Confirm the most recent message is visible using the Assert Visible task
assertVisible(ui.<support_page>.<latest_message>, errorhandling.STOP_ON_ERROR);

where:

4. Use cases

Scenario 1: Confirming a strap variant can be selected and added to cart after scrolling to it

Shoppers choosing a strap material select it from a dropdown further down the Diver Chronomat page, and that choice needs to scroll into view before it can be selected. The selected variant should be applied correctly and reflected when the product is added to the cart.

A tester uses Zoho QEngine to confirm that scrolling to the Strap Material dropdown, selecting a variant, and adding it to the cart all work correctly together.

1. Open the Diver Chronomat product page in the same window.
2. Scroll to the Strap Material dropdown.
3. Select the Leather option.
4. Add the product to the cart.
5. Confirm the cart success message appears.

Implementation

// Step 1: Open the Diver Chronomat product page on the ZWatch Commerce website in the same window using the Open URL task
openURL("https://zwatch.zohocommerce.com/products/diver-chronomat/3531661000000075722", "same window");
// Step 2: Scroll to the Strap Material dropdown using the Scroll To task
scrollTo("select[data-zs-attribute-name='Strap Material']");
// Step 3: Select the Leather option using the Select task
select("select[data-zs-attribute-name='Strap Material']", "1", select.INDEX);
// Step 4: Add the product to the cart using the Click task
click(".theme-product-qty-and-add-cart");
// Step 5: Confirm the cart success message appears using the Assert Visible task
assertVisible(".theme-cart-add-success-message", errorhandling.STOP_ON_ERROR);

Some pages embed a comments or activity feed inside its own scrollable panel, separate from the rest of the page, and reaching the latest entry needs that panel itself to scroll, not the surrounding page.

A tester uses Zoho QEngine to confirm that scrolling the comments panel into position at its bottom moves the panel's own internal scroll, leaving the rest of the page in its original position, and reveals the latest comment.

Steps

1. Open the page containing the comments panel in the same window.
2. Scroll the comments panel into position at its bottom.
3. Confirm the latest comment is visible.

Implementation

// Step 1: Open the page containing the comments panel using the Open URL task
openURL("https://www.<website_name>.com/<page_with_comments>", "same window");
// Step 2: Scroll the comments panel to its bottom using the Scroll To task
scrollTo(ui.<page_with_comments>.<comments_panel>, position.BOTTOM);
// Step 3: Confirm the latest comment is visible using the Assert Visible task
assertVisible(ui.<page_with_comments>.<latest_comment>, errorhandling.STOP_ON_ERROR);

Consider a retail organization that uses a Zoho Creator Inventory Manager application to track stock. Staff reviewing a long inventory list often scroll directly to a specific product's row rather than paging through the full report, and that row needs to actually come into view rather than staying off-screen.

A tester uses Zoho QEngine to confirm that scrolling to a specific record row brings it into view, then checks its stock level.

Steps

1. Open the Inventory report in the Inventory Manager application.
2. Scroll to the record row.
3. Confirm the stock level field displays the expected value.

Implementation

// Step 1: Open the Inventory report in the Inventory Manager application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/inventory-manager#Report:Inventory", "same window");
// Step 2: Scroll to the record row using the Scroll To task
scrollTo(ui.inventorymanager.record-row);
// Step 3: Confirm the stock level field displays the expected value using the Assert Text task
assertText(ui.inventorymanager.stock-level-field, "42", errorhandling.STOP_ON_ERROR);

5. Points to note

1. Prefer a locator or predefined page position over pixel coordinates whenever possible. Pixel coordinates depend on the page layout and may become unreliable if the layout changes, whereas locators identify elements directly and predefined positions remain consistent.
2. Since Scroll To only performs the scroll, follow it with an assertion, such as Assert Visible, to confirm the target became visible before the next action runs.
3. For the Scroll To task, prefer a stable locator such as an id, name, or CSS attribute selector or recorded for the element that needs to come into view. Full XPath is more likely to break when the page layout changes or when the target is inside a dynamically loaded section.

6. Related topics

1. Click
2. Hover
3. Drag and Drop

7. What's next