QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Creating a Percentage of Webpage Scrolled Indicator

Creating a Percentage of Webpage Scrolled Indicator

percentage-scrolled

Users usually wonder how much more is left for reading? A percentage scrolled indicator can be used for providing the percentage of page left for reading and it increases the overall user experience. In this post I will provide the easiest way to create a percentage scrolled indicator.


View Demo


For creating a percentage scrolled indicator we need to learn the following JavaScript properties and DOM events:

  1. window.pageYOffset and Element.offsetHeight : Refer this article to learn these two properties.
  2. window.innerHeight: This property is set to the height of the viewport(HTML tag). Similarly window.innerWidth returns the width of the viewport.
  3. onscroll Event: This event is triggered when the viewport(HTML tag) scrollbar is scrolled.

Implementation Of Percentage Scrolled Indicator

Here is the logic for calculating the percentage scrolled
Untitled-1

Here is the code for calculating the percentage scrolled.

<!doctype html>
<html>
<head>
    <title>Color Changing</title>
    <style type="text/css">
        #percentage
        {
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="percentage"></div>
    <div style="height: 4000px;"></div>
</body>
<script type="text/javascript">
    window.onscroll = function(){
        var heightOfWindow = window.innerHeight;
        var contentScrolled = window.pageYOffset;
        var bodyHeight = window.document.getElementsByTagName("body")[0].offsetHeight;
        if(bodyHeight - contentScrolled <= heightOfWindow)
       {
           window.document.getElementById("percentage").innerHTML = "100%";
       }
       else
       {
           var total = bodyHeight - heightOfWindow;
           var got = contentScrolled;
           window.document.getElementById("percentage").innerHTML = parseInt((got/total) * 100);
       }
   }
</script>
</html>

May 23, 2014Narayan Prusty
Twitter Cards Meta Tags TutorialCreating a WYSIWYG Editor
Comments: 0

    Leave a Reply Cancel reply

    To create code blocks or other preformatted text, indent by four spaces:

        This will be displayed in a monospaced font. The first four
        spaces will be stripped off, but all other whitespace
        will be preserved.
        
        Markdown is turned off in code blocks:
         [This is not a link](http://example.com)
    

    To create not a block, but an inline code span, use backticks:

    Here is some inline `code`.

    Narayan Prusty

    I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

    Image6 years ago 1 Comment Web Development
    Share this
    0
    GooglePlus
    0
    Facebook
    0
    Twitter
    0
    Linkedin
    Related Articles
    • Changing CSS Style using JavaScript
    • Capturing Webcam Video and Microphone Audio Using JavaScript
    • Detecting End Of Scrolling In HTML Element
    • How To Detect Element Entered Viewport
    • Pull To Refresh For Phonegap App
    Our Sponsor
    Freelance: I am available
    @narayanprusty
    Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





    Will get back to you soon!!!
    WordPress
    ReactJS
    Meteor
    Blockchain
    Serverless
    Kubernetes
    DevOps
    DB & Storage
    Ejabberd
    Let's get started
    My Books

    2014 - 2015 © QNimate
    All tutorials MIT license