An Easy Way to Make a Scroll or Scroll Indicator on a Website or Blog

Hi Web Developers! back again with the tech teacher. this time the tech teacher will share tutorials on how to make scroll or scroll indicators. For masters , please correct if something is not quite right, but I don't think there is and for newbies who need enlightenment, please follow and practice on their respective computers. Ok, let's continue the tutorial.

We must first know what the scroll button is? the scroll button is the button used to move up or down the page, so that it is clearer, see the following picture: 

So here we will make an indicator next to the button which is useful for knowing how many % of the page is scrolled, so that it is clearer we can see the following scroll indicator image:

Ok continue to the tutorial,

1. Add the following HTML code after the opening body on your website or blog.

<div id='scrollindicator'></div>

2. Add the following JavaScript code before the closing body on your website or blog.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> 
<script type='text/javascript'>
    //<![CDATA[
    var scrollTimer = null;
    $(window).scroll(function() {
       var viewportHeight = $(this).height(),
           scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
           progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
           distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollindicator').height() / 2;
        $('#scrollindicator')
            .css('top', distance)
            .text(' (' + Math.round(progress * 100) + '%)')
            .fadeIn(100);
        if (scrollTimer !== null) {
            clearTimeout(scrollTimer);
        }
        scrollTimer = setTimeout(function() {
            $('#scrollindicator').fadeOut();
        }, 1500);
    });
   //]]>
</script>

3.Add the following CSS code to style your Blog or Website.

/* indikator scroll */
#scrollindicator {display: none;position: fixed;top: 0;right: 20px;z-index:500;padding:3px 8px;background:rgb(1, 148, 60);color: #fff;border-radius:3px;}
#scrollindicator:after{content: " ";position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: rgb(1, 148, 60);}

4. Finally Save.

Please try these steps in your editor to get the result.

So Hopefully it'll be useful today, thank you.