Element.scrollIntoView() DEMO

by Sasabee

HTML

<body>
  <div class="totop"></div>
  <nav class="btns">
    <div class="btn">
      <span><a href="#a">to A (start)</a></span>
    </div>
    <div class="btn">
      <span><a href="#b">to B (center)</a></span>
    </div>
    <div class="btn">
      <span><a href="#c">to C (end)</a></span>
    </div>
  </nav>
  <div class="spacer"></div>
  <h2 id="a">A</h2>
  <div class="spacer"></div>
  <h2 id="b">B</h2>
  <div class="spacer"></div>
  <h2 id="c">C</h2>
  <div class="spacer"></div>
</body>

CSS

body {
  font-size: 24px;
  height: 2500px;
  background: black;
  color: white;
}
.btns {
  display: flex;
}
.btn {
  flex-basis: 30%;
  background: blue;
  border-radius: 4px;
  text-align: center;
  transition: background ease .1s;
}
.btn:not(:last-of-type) {
  margin-right: 5%;
}
.btn:hover {
  background: blueviolet;
}
.btn a {
  display: block;
  padding: .5rem 0;
  text-decoration: none;
  color: white;
  font-weight: bold;
}
h2 {
  background: red;
}
.spacer {
  height: 500px;
}
.totop {
  position: fixed;
  bottom: 0;
  right: 0;
  line-height: 1;
  text-align: center;
  font-size: 24px;
  width: 48px;
  height: 48px;
  background: blue;
  color: white;
  border-radius: 50%;
  transition: background ease .1s;
  cursor: pointer;
}
.totop:hover {
  background: blueviolet;
}
.totop::after {
  content: "\102C7";
  display: inline-block;
  margin: 12px 0;
}
@-webkit-keyframes frip {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
@keyframes frip {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
}
.frip {
  -webkit-animation: frip ease-out .3s;
          animation: frip ease-out .3s;
}

JavaScript

(function(a,b){
	a.addEventListener('click', function() {
		document.body.scrollIntoView({behavior: 'smooth', block: 'start'});
		a.classList.add('frip');
		a.addEventListener('animationend', function(){
			a.classList.remove('frip');
		},false);
	},false);
	b && (function() {
		for(var i = 0, c = ['start','center','end'], l = b.length; i < l; i++) {
			function f(d,g) {
				return function(e) {
					e.preventDefault();
					document.getElementById(d.hash.slice(1)).scrollIntoView({behavior: 'smooth', block: g});
				};
			}
			var h = b[i];
			h.addEventListener('click', f(h,c[i]),false);
		}
	})();
})(document.getElementsByClassName('totop')[0],document.querySelectorAll('a[href^="#"]'));