scroll tapi smooth

by Dedi Wibisono

HTML

<div class="body">
  <div class="section fahmi">
    <h1>Fahmi</h1>
  </div>
  <div class="section haris">
    <h1>Haris</h1>
  </div>
  <div class="section pungky">
    <h1>Pungky</h1>
  </div>
  
</div>

<div class="smooth"></div>

CSS

.smooth {
height: 40px;
background-color: orange;
z-index: 2;
position: absolute;
width: 50px;
top: 50px;
}
.section{
  height:100vh;
  text-align:center;
}
.fahmi{
  background:red;
}
.haris{
  background:green;
}
.pungky{
  background:grey
}

.body {
min-height: 700px;
}

JavaScript

try {
 window.onscroll = setNavPosition;
 }
 catch(e) {
 document.documentElement.onscroll = setNavPosition;
 }
 function setNavPosition(){
 $('.smooth').stop();
 try {
 if (document.body.scrollTop > document.documentElement.scrollTop) {
 var targetPosition = document.body.scrollTop + 50;
 }
 else {
 var targetPosition = document.documentElement.scrollTop + 50;
 }
 }
 catch(e) {
 var targetPosition = document.documentElement.scrollTop;
 }
 $('.smooth').animate({top: targetPosition}, 600);
 }