Scroll Speed Control

Scroll with speed control.

by Rafael Marini Rôlo

HTML

<center>
  <button id="btn-go-floor" type="button">Click & Go FAST to the FLOOR!</button>
</center>

<h1>Pure JavaScript NewsPaper</h1>

<img width="636" src="https://miro.medium.com/max/700/0*oYERjNNFMUQoiKJt.png"/>

<h2>Scroll Direction & Speed Control with pure JavaScript</h2>

<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem mauris, lobortis sit amet ex ac, eleifend vestibulum ante. Mauris tincidunt, nunc interdum porttitor euismod, risus elit consectetur ligula, id fringilla erat sem eu neque. Integer tellus mi, vulputate condimentum ipsum vel, mollis dignissim dui. Nunc non ante odio. Maecenas id purus aliquam, ultrices lorem vel, vulputate tortor. Phasellus ut elementum felis, vel posuere sapien. Curabitur luctus leo quam, a mollis justo dignissim vitae. Integer venenatis elit et justo congue porta ut eu nisi.</p>
	<p>Fusce quis quam non magna hendrerit tempus ut eget diam. Nunc posuere convallis magna, eu rhoncus leo aliquam id. Integer vestibulum in purus quis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus tortor. Quisque ante elit, tristique quis magna eu, blandit porttitor ex. In suscipit dui at urna ullamcorper finibus. Vivamus porttitor felis lectus, ultricies dignissim ex tristique a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce venenatis diam et leo feugiat elementum. Aliquam pulvinar lobortis sapien non ultricies. Maecenas aliquam ipsum eget sem congue lobortis.</p>
	<p>Maecenas feugiat vitae quam quis facilisis. In sit amet nisi ut est ultricies porttitor. Pellentesque tortor erat, congue at odio sit amet, pharetra lacinia mi. Sed ac massa magna. Curabitur rhoncus dignissim ex, at tempus lacus molestie vel. Sed maximus quam in sagittis tincidunt. Aliquam erat volutpat. Nulla at justo sapien. Duis accumsan diam sed tempus mattis. Fusce eu neque venenatis, interdum justo in, blandit ante. Integer ut ante...

CSS

html {
  padding: 26px;
}

body {
  margin: auto;
  max-width: 690px;
  border: 3px solid whitesmoke;
}

h1, h2 {
    text-align: center;
}

img {
    margin: auto;
    display: block;
}

div {
  margin: 26px;
  text-align: justify;
}

center {
  margin: 26px;
}

button {
  font-size: 15px;
  min-width: 269px;
  padding: 8px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 13px;
  border-style: ridge;
  background: #ffeb00e0;
}

JavaScript

// Bind your button click, scroll direction and effect speed
document.getElementById("btn-go-top").onclick = function () {
	// Check if it's really on the floor
	if(document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight === 0) {
		scrollTo(0, 13000);
  }
}

// Check if it's really at the top
document.getElementById("btn-go-floor").onclick = function () {
	if(document.documentElement.scrollTop === 0) {
			scrollTo(document.documentElement.scrollHeight-document.documentElement.clientHeight, 4269);
    }
}
/*--------------------------------------------
 Functions to make scroll with speed control
---------------------------------------------*/

// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. Default easeOutCuaic
function scrollTo(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;
if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}
b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),
"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){
function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),
f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeOutCuaic(t){t--;return t*t*t+1;}