<body>  
  <div class='post-body'>
    <h2 class='post-title'>Scroll ke bawah untuk melihat hasilnya</h2>        
    <p>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.</p>    
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p> 
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>      
</div> 
    
  <div class='post-body'>        
    <p>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.</p>    
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p> 
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>      
</div> 

  <div class='post-body'>       
    <p>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.</p>    
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p> 
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>      
</div> 

  <div class='post-body'>        
    <p>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.</p>    
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p> 
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>      
</div> 

  <div class='post-body'>       
    <p>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.</p>    
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p> 
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem.</p>     
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>      
</div>    
<div id='scroll'></div>    
</body>
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);

body {
    background-color:#f9f9f9;
    font-size:16px;
    color:#444;
  font-family: 'PT Sans Narrow', sans-serif;
}
.post-body h2{
    color:#e25633;
}
.post-body {
    max-width:680px;
    margin:20px auto;
    border:10px solid #f0f0f0;
    padding:15px 20px;
    background-color:#fff;
    color:#444;
}
#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}
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 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js