<button id="btn-to-bot">Нажимай меня полностью для скролла вниз!</button>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Топ-чарт ВК фигня</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>И все, кто в топ-чарте ВК тоже фигня</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<p>Тут типа какой-то контент</p>
<button id="btn-to-top">Нажимай меня полностью для скролла вверх!</button>
body {
  position: relative;
  height: auto;
  padding-bottom: 20px;
  background: #dce3ff;
}
#btn-to-top {
  position: absolute;
  bottom: 10px;
  left: 0px;
  margin-top: 20px;
}
p {
  line-height: 50px;
  font-size: 16px;
  font-weight: 400;
}
document.getElementById("btn-to-top").onclick = function () {
  if(document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight === 0) {
    scrollTo(0, 3000);
  }
}

document.getElementById("btn-to-bot").onclick = function () {
  if(document.documentElement.scrollTop === 0) {
      scrollTo(document.documentElement.scrollHeight-document.documentElement.clientHeight, 3000);
    }
}

function scrollTo(element, duration) {
  var e = document.documentElement;
    if(e.scrollTop===0){
        var t = e.scrollTop;
        ++e.scrollTop;
        e = t+1===e.scrollTop--?e:document.body;
    }
    scrollToC(e, e.scrollTop, element, duration);
}

function scrollToC(element, from, to, duration) {
    if (duration <= 0) return;
    if(typeof from === "object")from=from.offsetTop;
    if(typeof to === "object")to=to.offsetTop;

    scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}

function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
    if (t01 < 0 || t01 > 1 || speed<= 0) {
       element.scrollTop = xTo;
        return;
    }
  element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
  t01 += speed * step;
  
  setTimeout(function() {
    scrollToX(element, xFrom, xTo, t01, speed, step, motion);
  }, step);
}

function linearTween(t){
  return t;
}

function easeInQuad(t){
  return t*t;
}

function easeOutQuad(t){
  return -t*(t-2);
}

function easeInOutQuad(t){
  t/=0.5;
  if(t<1)return t*t/2;
  t--;
  return (t*(t-2)-1)/2;
}

function easeInCuaic(t){
  return t*t*t;
}

function easeOutCuaic(t){
  t--;
  return t*t*t+1;
}

function easeInOutCuaic(t){
  t/=0.5;
  if(t<1)return t*t*t/2;
  t-=2;
  return (t*t*t+2)/2;
}

function easeInQuart(t){
  return t*t*t*t;
}

function easeOutQuart(t){
  t--;
  return -(t*t*t*t-1);
}

function easeInOutQuart(t){
  t/=0.5;
  if(t<1)return 0.5*t*t*t*t;
  t-=2;
  return -(t*t*t*t-2)/2;
}

function easeInQuint(t){
  return t*t*t*t*t;
}

function easeOutQuint(t){
  t--;
  return t*t*t*t*t+1;
}

function easeInOutQuint(t){
  t/=0.5;
  if(t<1)return t*t*t*t*t/2;
  t-=2;
  return (t*t*t*t*t+2)/2;
}

function easeInSine(t){
  return -Mathf.Cos(t/(Mathf.PI/2))+1;
}

function easeOutSine(t){
  return Mathf.Sin(t/(Mathf.PI/2));
}

function easeInOutSine(t){
  return -(Mathf.Cos(Mathf.PI*t)-1)/2;
}

function easeInExpo(t){
  return Mathf.Pow(2,10*(t-1));
}

function easeOutExpo(t){
  return -Mathf.Pow(2,-10*t)+1;
}

function easeInOutExpo(t){
  t/=0.5;
  if(t<1)return Mathf.Pow(2,10*(t-1))/2;
  t--;
  return (-Mathf.Pow(2,-10*t)+2)/2;
}

function easeInCirc(t){
  return -Mathf.Sqrt(1-t*t)-1;
}

function easeOutCirc(t){
  t--;
  return Mathf.Sqrt(1-t*t);
}

function easeInOutCirc(t){
  t/=0.5;
  if(t<1)return -(Mathf.Sqrt(1-t*t)-1)/2;
  t-=2;
  return (Mathf.Sqrt(1-t*t)+1)/2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js