Create a simple scroll page

HTML

<div id="lks-scroll"></div>
<div id="r-div"></div>
<div id="b-div"></div>
<div id="y-div"></div>
<div id="o-div"></div>
<div id="bl-div"></div>

CSS

html, body 
{
  height: 100%;
}

body 
{
  position: relative;
}

#lks-scroll{
      background-image: url(https://deway.teamwork.com/images/icons/top_grey.png);
      width:38px;
      height:38px;
      position: fixed;
      bottom: 30px;
      right: 25px;
      opacity: 0.5;
      cursor: pointer;
            }
            
#lks-scroll:hover
{
      opacity: 1;
} 

.lks-over {
    top: 30px;
    transform:             rotate( -180deg );            
        -moz-transform:    rotate( -180deg );            
        -ms-transform:     rotate( -180deg );            
        -o-transform:      rotate( -180deg );            
        -webkit-transform: rotate( -180deg );            
    transition:             transform 550ms ease;
        -moz-transition:    -moz-transform 550ms ease;
        -ms-transition:     -ms-transform 550ms ease;
        -o-transition:      -o-transform 550ms ease;
        -webkit-transition: -webkit-transform 550ms ease;
}

.lks-out {
    transform:             rotate( -360deg );            
        -moz-transform:    rotate( -360deg );            
        -ms-transform:     rotate( -360deg );            
        -o-transform:      rotate( -360deg );            
        -webkit-transform: rotate( -360deg );            
    transition:             transform 550ms ease;
        -moz-transition:    -moz-transform 550ms ease;
        -ms-transition:     -ms-transform 550ms ease;
        -o-transition:      -o-transform 550ms ease;
        -webkit-transition: -webkit-transform 550ms ease;
}

#r-div{
  width: 100%;
  height: 300px;
  border-radius: 25px;
  border: 2px solid red;
}

#b-div{
  width: 100%;
  height: 300px;
  border-radius: 25px;
  border: 2px solid blue;
}

#y-div{
  width: 100%;
  height: 300px;
  border-radius: 25px;
  border: 2px solid yellow;
}

#o-div{
  width: 100%;
  height: 300px;
  border-radius: 25px;
  border: 2px solid orange;
}
  
#bl-div{
  width: 100%;
  height: 300px; 
  border-radius: 25px;
  border: 2px solid...

JavaScript

var lksGlobalClicksCount = 1;
var lksGetCurrentHeight  = 0;

document.getElementById( "lks-scroll" ).onclick = function(e){
	lksGetCurrentHeight++;
  
	if(lksGlobalClicksCount % 2 !== 0){
  	lksGetCurrentHeight = window.pageYOffset; 
  	window.scrollTo(0,0);
    
  }
  
 else{
    window.scrollTo(0 , 1500);
    
  } 
  
  rotateElement("lks-scroll" , lksGlobalClicksCount);
  
}

var rotateElement = function( idElement , countClicks )
{
	var rotate = document.getElementById( idElement );
 
if( countClicks % 2 === 0 ){ 
    rotate.className = 'lks-out';

}

else{
    rotate.className = 'lks-over';
		 }
	lksGlobalClicksCount++;
}