Hello Scroll

Scroll to different positions on a page.

Introduction Last updated: 26 Nov 2025

Open Example Preview

About

In this example, we demonstrate how to scroll to a specific position on the page across multiple scenarios:

• Scroll down the height of the visitor’s screen with animation.
• Scroll down the height of the visitor’s screen without animation.
• Scroll to an element.
• Scroll down by a fixed 100 pixels.
• Scroll to the top of the page.

This example illustrates practical ways to implement scrolling behavior on a site.

APIs

• $w.Button API
• $w.Text API
• Window

How we built it

We added the following to our site:

Page Elements

• Buttons for different scrolling scenarios.
• A text element as a scroll target.

Frontend Code

Home

The code in this file handles button clicks that trigger the different scrolling behaviors on the page. In this file, we:

• When the page loads, call getBoundingRect() to retrieve the viewport height of the visitor’s browser window.
• Set up onClick() event handlers for 5 buttons.
• Call the Wix Window API’s scrollTo() and scrollBy() methods, and the Text element’s scrollTo() method to the different page positions.

Code Snippets

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.