Smooth Scrolling 1

ScrollBy, RequestAnimationframe

by RK234

HTML

<!DOCTYPE HTML>
<html lang="de">

  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=5.0, user-scalable=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
  </head>

  <body>
    <nav>
      <a href="#cont1" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 1</a>
      <a href="#cont2" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 2</a>
      <a href="#cont3" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 3</a>
      <a href="#cont4" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 4</a>
      <a href="#cont5" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 5</a>
      <a href="#cont6" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 6</a>
      <a href="#cont7" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 7</a>
      <a href="#cont8" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 8</a>
      <a href="#cont9" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 9</a>
      <a href="#cont10" onclick="scrtoelem(d.getElementById(this.getAttribute('href').replace('#', '')), 20); return false;">Link 10</a>
    </nav>
    <div id="cont1">Cont 1</div>
    <div id="cont2">Cont 2</div>
    <div id="cont3">Cont 3</div>
    <div id="cont4">Cont 4</div>
    <div id="cont5">Cont 5</div>
    <div id="cont6">Cont 6</div>
    <div id="cont7">Cont 7</div>
 ...

CSS

* {
  -webkit-text-size-adjust: none !important;
  -webkit-font-smoothing: antialiased !important;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0px none;
}

body {
  overflow-y: scroll;
}

nav {
  position: fixed;
  right: 0;
  width: 250px;
  background: #ddd;
}

nav>a {
  display: inline-block;
  padding: 10px;
}

div {
  min-height: calc(50vh - 20px);
  margin: 20px;
  background: blue;
  padding: 10px;
  border: 1px solid #000;
}

JavaScript

const d =	document, w =	window;
var scrstp_dist;
function absTop(el) {
	return (el.offsetParent) ?	el.offsetTop + absTop(el.offsetParent) :	el.offsetTop;
}
function scrt() {
	return w.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}
function scrtoelem(elem, ofs = 0) {
	setTimeout(function() { scrstp_dist =	0; scrollstep(Math.floor(-scrt() + absTop(elem) - ofs)); }, 100);
}
function scrollstep(dist) {
	var n =	Math.floor(dist / 30 * (1 - Math.abs(scrstp_dist / dist - 0.5)));
	if (Math.abs(scrstp_dist + n) < Math.abs(dist)) {
		scrstp_dist+=	n;
    // alert(n);
		w.scrollBy(0, n);
		w.requestAnimationFrame( function(timestamp) { scrollstep(dist); } );
	} else {
		w.scrollBy(0, dist - scrstp_dist);
	}
}