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.
“…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:
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:
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.