<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;
}
This Pen doesn't use any external CSS resources.