Remember the scroll position in JavaScript apps

One of the things that can be a major annoyance in an app does not remember the scroll position in a list when returning to a page. An example of a good implementation would be the Windows Store app, where the scroll position on the main hub page is remembered when navigating to a group or an app. This post will explain how to remember the scroll position in JavaScript apps.

This is the second post in collaboration with Arian from Zilverstede, who have several JavaScript apps in the Windows Store. As with the previous post in this series, we’ll start out with the JavaScript Grid app template and expand the functionality to explain the implementation.

Adding a state container

The first thing we’ll do is create a new JavaScript file that will hold an object to access the state from the Application namespace. To do so, add a new file called state.js to the /js/ folder of your project with the following contents:

This will allow us to use Application.state (and thus Application.state.groupedItems.indexOfFirstVisible) from anywhere within our application. To make sure this file is used, reference the script in the default.html page in the root of your project by adding a script reference between the HEAD tags of the page:

Saving and restoring the position

The next step is to actually save the position when navigating from the groupedItems page and restoring that position when navigating back to it. To do so, open up the /pages/groupedItems/groupedItems.js file and insert the following function in the page definition (for example on line 55):

To restore the state when navigating back to the page, append the following snippet to the very end of the _initializeLayout function:

Now, when we run the app, scroll a bit to the right and click on an item, the index of the first visible item on the page will be stored. When pressing the back button on the detail page, the scroll position will restore and we can continue scrolling where we left off.

Suspend/resume support for added UX bonus

To complete our implementation, we’ll want to offer the user the same scroll position behavior when the app gets suspended and resumed afterward. To do so, open up the /js/default.js file and insert the following line of code at the very end of the app.oncheckpoint function:

To restore the state when the app gets resumed, add the following line of code to the else clause on line 19:

Now we’re all set and our users will be delighted we implemented this seemingly small detail in our app, but improve the user experience a lot by doing so. As always, download the complete solution below.

Downloads

Scroll position JavaScript sample (228 downloads)
Pin It

6 thoughts on “Remember the scroll position in JavaScript apps

  1. Pingback: Remember the scroll position in XAML apps - Microsoft User Experience Blog

  2. Pingback: Remember the scroll position in XAML apps | Tirionline

  3. Hi Rajen,

    Thanks for this article. I was fighting with scrollPosition and ensureVisible on the listview with very mixed results. Your solutions works a lot better.

    I did have a problem when navigating away and back quickly. It often kept showing the loading progress for the listview and never showed the items. I have a lot of items in my listview, so that may have caused it.

    To solve, I did the following:
    Subscribed to the loadingstatechanged of myListview.
    In the handler of this event:

    if (myListView.loadingState == “viewPortLoaded” && Application.state.groupedItems.indexOfFirstVisible != undefined) {
    msSetImmediate(function () {
    var index = Application.state.groupedItems.indexOfFirstVisible;
    Application.state.groupedItems.indexOfFirstVisible = undefined; // Prevents any further calls
    myListView.indexOfFirstVisible = index;
    });
    }

    This solved my problems:)

    Cheers,
    Niels Bos
    SMT Systems

Leave a Reply

Your email address will not be published. Required fields are marked *