{ Lekker Logic }

Technology Solutions

jQuery Page Scroll Position Indicator – Reading Progress

Quick Intro: Page scroll position indicator gives the user a sense of where they are when scrolling through a page/article.  Working Demo

I’ve been using nProgress.js for years now on AJAX triggered pages/events as it offers some really nice loading effects on dynamic pages.  This gives you a YouTube style loading page indicator on static or AJAX data loads.

I recently decided to deploy a similar looking element as a “scroll indicator” on large pages that require lengthy scrolling.  The intent is to give the user a sense of where they are in the article and how much more they have left to scroll, or in other words, how much they’ve seen and how much more they need to go until the end.  This is certainly not a “must have” feature but wanted to try it out regardless.

Reading through this CSS-Tricks article by Pankaj Parashar I certainly identify with the idea that:

“…in some cases, the position and appearance of our indicator can be ambiguous and potentially confuse the user.”

For this reason I really only see two ways to display this on a page.

The first being at the very top in a small height element to not distract the user.  This is shown below:

Small height element to not distract the user. However this is typically where a loading page indicator is found, which can cause confusion.

The second is at the bottom of your menu bar or other fixed header elements.  To me this represents the best possible solution to not distract the user and create separation from a possible loading page indicator if one is being used.  This is shown below:

Placed on the bottom of a fixed nav bar or header element offers the best UX in my opinion

The Working Demo can be used to sort through the two options presented.  I built upon the plugin originally made by Michael Lynch and tweaked slightly for my needs.  Hopefully this can provide someone help in the future on both application and usability considerations.

Lekker Logic
Tags: HTML, Javascript, jQuery, Programming, Tutorials