JavaScript: Scroll User

Use JavaScript to dynamically move the user’s position on a web page.

Due to business requirements within a page, sometimes users might be confused based on the activity they experience.
For example, if a page allows the user to perform an action which affects the page, but below where their “focus” currently resides, they might not notice the change they have made.
Obviously if you want them to see the results of their action and the change affects a portion of the page outside of their current visibility, you must somehow move the user’s focus (where their input is currently received within the page) to the newly changed spot on the page.

In this example I will illustrate how to use two JavaScript functions and an ASP.NET function to achieve this affect – move the user to the desired portion of a web page.
First, I will call the ASP.NET function ScriptManager.RegisterClientScriptBlock() to wrap the JavaScript code I wish to have executed immediately when the page loads.
Next, I’ll pass into that function the JavaScript setTimeout() function, telling it wait 6 seconds before executing the code I give it.
Finally, to move the user to the desired portion of the page, I will call window.scrollBy() to move the user on the page to the x-axis point of ‘0’ and the y-axis point of ‘500’ which is near the bottom portion of the page (at least in the page layout I currently have, you may need to adjust the x-axis and y-axis points depending on the layout you are using).

1-javascript-scroll

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s