Web Elements

Scrolling indicator

Sometimes occurs that a page has a lot of information, with a lot of sections, and may you want to make the user know how much he or she has scrolled and how much it rest.

This plug-in is intended to solve this problems. This shows the percentage of the whole page the user read in real time.

Keep scrolling through the page, and see how a green bar will start filling up on the top of the page.

This bar is fixed to the top of the window. So it will follow you no matter how far you have scrolled.

Keep scrolling down through a gallery of images, and at the end you will find the code implemented on this plug-in.

  1. First, include the jQuery plug-in we provide. <script src="path/jquery.min.js"></script>
  2. After that, include our plug-in. <script src="path/WETotalScroll.js"></script>
  3. Include also the stylesheet we provided. It contains the minimum styling for the plug-in to properly show. <link rel="stylesheet" type="text/css" href="path/WETotalScroll.css">
  4. Create a div with the class total-scroll-container. That will create the filling up bar. <div class="total-scroll-container"></div>
  5. Initialize the plug-in with the following code: $(".total-scroll-container").WETotalScroll();
  6. The plug-in can be placed into the four corners of the window: top, bottom, left or right.
    The option to pass the position is "position". Default is top if not providen. $(".total-scroll-container").WETotalScroll({ "position": "left" });