Scrollto Speed/Duration Setting

scrollTo speed/duration setting

Live example solution with pure javascript below:

// 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
---------------------------------------------*/

// Element or Position to move + Time in ms (milliseconds)
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);
}

// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
    if (duration <= 0) return;
    if(typeof from === "object")from=from.offsetTop;
    if(typeof to === "object")to=to.offsetTop;
    // Choose one effect like easeInQuart
    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);
}

/* Effects List */
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 -Math.cos(t/(Math.PI/2))+1;
}

function easeOutSine(t){
    return Math.sin(t/(Math.PI/2));
}

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

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

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

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

function easeInCirc(t){
    return -Math.sqrt(1-t*t)-1;
}

function easeOutCirc(t){
    t--;
    return Math.sqrt(1-t*t);
}

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

html {
  padding: 26px;
}

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

h1, h2 {
    font-size: 22.5px;
    text-align: center;
}

img {
    margin: auto;
    display: block;
    width: 526px;
}

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

center {
  margin: 26px;
}

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

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

<h1>Pure JavaScript NewsPaper</h1>

<img 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 nibh.</p>
    <p>Etiam iaculis purus sollicitudin ornare eleifend. Duis tincidunt, sem quis dapibus molestie, arcu ipsum tristique diam, commodo suscipit sapien lacus et eros. Ut sed posuere augue. Nam quis elit tristique odio fermentum ultricies id eu turpis. Morbi pellentesque congue nisl sed blandit. Sed sed nibh arcu. Curabitur quis risus at tortor tristique porttitor eget dapibus tellus. Cras elit eros, sollicitudin sed tempus dictum, consequat vel nulla. Nulla ac turpis non erat suscipit semper ut in enim. Nam feugiat erat eu neque semper aliquet. Suspendisse augue dui, venenatis eu metus in, ultricies varius ante. Sed magna ligula, lobortis nec interdum sed, ornare sed risus. Fusce venenatis euismod tortor, non vestibulum ligula placerat sit amet. Nullam placerat risus ut libero semper, vitae lobortis tortor pharetra. Quisque in ex in ante egestas imperdiet a eu ligula.</p>
    <p>Vivamus sit amet enim at ligula elementum interdum. Integer imperdiet neque luctus, convallis lacus a, consectetur turpis. Aenean rhoncus sodales diam, non elementum augue fermentum sed. Cras eu dui quis dolor finibus laoreet. Vestibulum ut nisl venenatis, imperdiet leo sit amet, mollis nisi. Ut venenatis magna et nisl tincidunt, at porta ante sodales. Nullam dignissim viverra massa eu faucibus. Cras diam nisl, dignissim nec euismod non, iaculis id mauris. Cras sed ex vitae nibh ornare tempor aliquet quis leo.</p>
    <p>Aliquam a placerat velit, at semper dui. Praesent sed odio in sem ultrices tincidunt et nec nulla. Sed sed auctor neque. Nunc ultricies erat malesuada erat rutrum, placerat convallis lacus luctus. Morbi sit amet ligula quis purus varius commodo posuere euismod sem. Donec vestibulum sollicitudin dui, sit amet dapibus urna consectetur vel. Integer congue dui id elit consectetur, vitae lobortis turpis gravida.</p>
    <p>Cras ut mauris interdum, pulvinar justo ut, elementum diam. Fusce feugiat dolor malesuada, imperdiet justo ac, convallis magna. Pellentesque et libero ac diam efficitur pulvinar sed vitae erat. Praesent id placerat quam. Praesent consectetur turpis mauris, ut rutrum elit malesuada egestas. Donec volutpat eu augue vel sollicitudin. Sed egestas scelerisque lobortis. Praesent venenatis faucibus risus. Ut semper malesuada nibh vel facilisis. Phasellus lobortis faucibus velit, nec viverra arcu cursus sed. Cras fringilla eros velit, eget molestie velit tempor vel. Aliquam consectetur suscipit orci, ut tristique nibh commodo nec. In sollicitudin dignissim mi vel rutrum. Mauris elementum, dolor quis cursus aliquet, urna sapien pharetra mi, nec egestas ligula risus quis felis. Nam consectetur est in quam gravida dictum. Sed at nisi aliquet, mollis mi eget, gravida neque.</p>
    <p>Nulla est massa, fringilla vitae consequat in, congue eget purus. Etiam et erat lacus. Nulla interdum, lorem vel eleifend hendrerit, ex elit hendrerit elit, vitae auctor leo nisl vehicula dolor. Nullam porttitor odio turpis, tempus commodo tellus lacinia aliquet. Mauris malesuada ut tellus vel maximus. Quisque ut venenatis nulla. Etiam scelerisque suscipit pretium. Aliquam sed dapibus nibh. Pellentesque varius, enim ut facilisis ultrices, ipsum libero dignissim velit, eu sollicitudin orci tellus rhoncus ante. Nunc sed egestas ex, vel consectetur quam. Nullam at dignissim ante, ut hendrerit purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit a dolor et tincidunt. Cras eros diam, laoreet in mattis eget, luctus in lorem. Ut eget massa dictum, facilisis libero sit amet, feugiat tortor.</p>
    <p>Donec vehicula a orci in lacinia. Fusce sed tellus non erat vulputate aliquam et gravida odio. Proin at mauris facilisis ex eleifend ullamcorper. Proin ultrices vehicula eros, quis viverra orci hendrerit ultricies. Aliquam blandit sagittis felis porttitor aliquet. Cras sollicitudin pharetra pulvinar. Quisque et ipsum magna. Aliquam aliquet eros eget ligula dignissim aliquet. Vivamus interdum velit et sem ultricies facilisis. Quisque felis ipsum, laoreet sit amet est ut, molestie tristique tortor. Duis sapien neque, pharetra eget malesuada nec, porta tempor velit. Vestibulum non lobortis erat. Proin non orci augue. Donec ultrices tincidunt dolor, sit amet commodo est.</p>
    <p>Mauris ut venenatis orci. Maecenas eget justo dui. Vestibulum ut dolor vulputate, tincidunt velit vel, consectetur neque. Sed erat odio, condimentum sed sollicitudin eu, tincidunt quis urna. Pellentesque ut porta sapien. Maecenas semper sagittis mi sed consectetur. Ut lorem erat, lacinia nec tellus id, imperdiet dictum purus. Aenean malesuada vitae eros ut vulputate. Donec sapien metus, sollicitudin ut tellus vitae, condimentum consectetur eros. Integer eu odio leo. Proin ultricies, purus quis dignissim eleifend, lectus odio ullamcorper est, id accumsan nibh risus sed dolor. Fusce non dolor eu ligula mattis dignissim non id risus. Praesent at erat dui. Mauris mattis aliquam pretium.</p>
    <p>Nulla at turpis in mauris venenatis dapibus. Etiam condimentum egestas congue. Vivamus posuere ornare nunc nec finibus. Ut ultrices neque eu diam aliquam iaculis eu non odio. Morbi tempus purus in felis tempor vestibulum. Morbi sed sapien pretium, maximus magna sed, feugiat felis. Fusce id lectus in tortor convallis porta eget sit amet massa. Fusce est ligula, pulvinar vitae elementum molestie, lobortis a elit. Sed a ligula urna. Integer pellentesque, tellus quis dignissim elementum, dui sem efficitur orci, et interdum massa ante at est. Vestibulum quis pulvinar quam. Curabitur sollicitudin, ipsum ut facilisis gravida, ex massa hendrerit orci, eu accumsan enim diam quis est.</p>
    <p>In vehicula euismod rutrum. Nulla imperdiet magna vitae est sodales vestibulum. Praesent posuere justo ac mauris auctor ullamcorper. Ut rutrum magna id felis tincidunt dictum. Phasellus rhoncus condimentum enim in consequat. Mauris pulvinar velit libero, a rhoncus metus tincidunt vitae. Etiam efficitur eget diam pellentesque imperdiet. Ut efficitur ipsum a dui cursus egestas. Nulla id lacus pellentesque ex rutrum eleifend. Aliquam tincidunt egestas rhoncus.</p>
    <p>Donec sit amet diam a arcu dignissim laoreet eu non augue. Nam bibendum eleifend sapien, eget luctus justo feugiat vel. Maecenas vitae consectetur ex, ut tempor urna. Donec elementum dictum laoreet. Curabitur eleifend lacus sed pretium commodo. Mauris arcu tellus, luctus eget pretium fermentum, ornare at libero. Praesent rutrum, elit et eleifend iaculis, ligula sapien fermentum ex, vel accumsan arcu augue vel lorem.</p>
    <p>Praesent ipsum dolor, auctor ac dolor at, facilisis aliquet tellus. Aenean gravida turpis at varius viverra. Nullam in massa ut mi luctus iaculis. Maecenas porta mauris nibh, ut facilisis sem ultricies eu. Suspendisse vestibulum luctus pellentesque. Duis accumsan risus ut risus iaculis malesuada. Praesent sodales risus at velit elementum, in dictum nunc tempus. Maecenas accumsan tempus enim, quis tristique turpis. Nullam efficitur rutrum tortor a facilisis. Cras pulvinar eu dolor et tincidunt. Sed maximus sodales imperdiet.</p>
    <p>Pellentesque elementum tellus neque, quis luctus eros placerat nec. Aenean dictum ligula sed leo tempor molestie. Pellentesque rutrum molestie quam, ac maximus odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu efficitur nisi. Aliquam condimentum diam vel ligula volutpat, sit amet egestas ipsum condimentum. Aenean volutpat elit quis accumsan laoreet. Mauris elementum ultrices nisl, sit amet pretium elit. Mauris ut purus a ligula convallis auctor.</p>
    <p>Ut ornare dolor at risus suscipit molestie. Nunc laoreet molestie justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ullamcorper sem tortor, vitae eleifend libero consequat quis. Cras congue dictum risus. Vivamus efficitur ullamcorper cursus. Nam et ipsum quis justo tempor ultricies vel ac sem.</p>
    <p>Maecenas vel commodo erat. Nullam nec molestie est. Aenean eleifend semper arcu, in consequat augue ultricies sed. Nam vehicula dictum ligula, ac laoreet libero convallis in. Nunc in elit sit amet sem egestas feugiat. Aliquam sagittis consequat dolor. Praesent condimentum varius tortor et tincidunt. Nunc diam felis, varius et elementum non, bibendum at ex. Nam bibendum vulputate justo.</p>
    <p>Aliquam sed urna ut massa convallis dignissim. Sed gravida imperdiet est, sed scelerisque libero maximus id. Fusce sit amet fermentum magna. Fusce congue, enim vel lacinia molestie, magna sem bibendum diam, vel sodales lectus ipsum in arcu. Vestibulum scelerisque, tellus a facilisis facilisis, ligula arcu bibendum eros, iaculis faucibus ex eros vel magna. Ut non convallis diam, ac venenatis nisi. Nunc vel velit quis diam placerat lacinia. Phasellus laoreet dapibus convallis. Nunc sit amet faucibus purus. Nulla et sapien enim. Vivamus quis sem non quam faucibus vulputate. Nam venenatis urna neque, sed gravida tellus eleifend nec. In tincidunt dui dignissim, auctor ipsum non, varius felis. Fusce vel fringilla nisl, et porttitor velit.</p>
    <p>Curabitur augue massa, molestie ac nulla id, sagittis condimentum enim. In ullamcorper velit et sapien ornare, at bibendum lorem consectetur. Pellentesque ultrices felis quis dolor luctus, nec sagittis libero suscipit. Nunc consequat leo ut tincidunt pharetra. Sed pellentesque pharetra mauris. Aenean rhoncus massa odio, et porta neque pulvinar quis. Donec pharetra metus eget lorem malesuada molestie. Nam vel cursus lorem. Mauris dui elit, fermentum eu dapibus in, volutpat ut arcu. Nunc a porttitor felis, et tempus ligula.</p>
    <p>Morbi vestibulum interdum elementum. Pellentesque purus erat, posuere ac finibus id, congue eu nibh. Vestibulum placerat metus non tortor gravida, interdum pellentesque metus tincidunt. In a dui vel lectus ornare laoreet. Etiam varius elit sit amet accumsan semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut nec vestibulum est, a hendrerit ligula. Morbi nec congue sem. In at mattis orci, ut efficitur risus. Suspendisse nec luctus purus. Quisque convallis nunc nisl, non posuere dui sodales a.</p>  
</div>

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

<h2>Wait finish the scroll effect & Click in the button on the floor</h2>

<center>
  <button id="btn-go-top" type="button">Click & Go SLOW to the TOP!</button>
</center>

Is it possible to add duration and easing to window.scrollTo?

Try this:

• Comment out (or delete) window.scrollTo(0, difHigh); line inside the if (difHigh>0) {} clause.
• Add $('html,body').animate({scrollTop:difHigh},400); instead.

JavaScript changes:

if (difHigh > 0) {
    $('html,body').animate({scrollTop:difHigh},400);
    //window.scrollTo(0, difHigh);
}

Snippet:

$(document).ready(function () {
    //checks difference between number of rows and ids. If none, guide is complete and code can be removed.
    //if a result is used in more that one question reduce the value or results by the number of reuses
    var rows = $('#qTable tr').length - 1;
    var liids = $('#qTable li').length;
    if (rows != liids) {
        $('#errdiv').html('Number of rows ( ' + rows + ' ) does not match the number of questions ( ' + liids + ' )').show()
    }

    $('#qTable li').on('click', function () {
        //style the selected answer
        $(this).addClass('selectedAnswer').siblings().removeClass('selectedAnswer');
        //hide all rows after the currently displayed row and remove selectedAnswer style
        var rowCurrent = $(this).closest("tr").prevAll("tr").length + 2;
        var rowsAfter = ' tr:nth-child(n+' + rowCurrent + ')';
        $('#qTable' + rowsAfter).hide().find('li').removeClass('selectedAnswer');
        //show the next row that matches the question id
        var italNum = $(this).find('i').text();
        var qNext = ' tr:nth-child(' + italNum + ')';
        $('#qTable' + qNext).fadeIn(800);
        //scroll code to bring next question into view
        var qNextPos = $('#qTable' + qNext).offset();
        var qNextTop = qNextPos.top;
        var qNextHigh = $('#qTable' + qNext).height();
        var qNextBot = qNextHigh + qNextTop + 20;
        var scrHigh = $(window).innerHeight();
        var difHigh = qNextBot - scrHigh;
        if (difHigh > 0) {
            $('html,body').animate({scrollTop:difHigh},400);
            //window.scrollTo(0, difHigh);
        }
    })
})

#qTable td {
    padding:3px 1em;
    border:1px solid #ccc;
    border-radius:5px;
    background-color:#FeF;
    font-family:"Segoe UI"
}
#qTable {
    width:100%;
    border-spacing:0.5em
}
#qTable li {
    cursor:pointer
}
#qTable li:hover {
    text-decoration:underline
}
#qTable tr:nth-child(n+2) {
    display:none
}
#qTable p {
    font-weight:bold;
    line-height:50%
}
#errdiv {
    display:none;
    font-weight:bold;
    color:#903;
    padding:0.3em
}
.selectedAnswer {
    font-weight:bold;
    color:#060
}
i {
    display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="errdiv"></div>
<table id="qTable">
    <tr>
        <td>
            <p>The Applicant is a:</p>
            <ul>
                <li>Person <i>2</i>
                </li>
                <li>Corporation <i>3</i>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>
            <p>The person live in:</p>
            <ul>
                <li>Grande Oak Estates <i>11</i>
                </li>
                <li>Other neighborhood <i>4</i>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>
            <p>The corporation's annual sales are:</p>
            <ul>
                <li>$5 million or more <i>10</i>
                </li>
                <li>Less than $ 5 million <i>6</i>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>
            <p>What is the person's golf handicap?</p>
            <ul>
                <li>Less than 5 <i>8</i>
                </li>
                <li>5 or more <i>5</i>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>
            <p>What is the person's net worth?</p>
            <ul>
                <li>$2 million or more <i>9</i>
                </li>
                <li>Less than $2 million<i>7</i>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>The corporation does not qualify for a membership</td>
    </tr>
    <tr>
        <td>The person does not qualify for a membership</td>
    </tr>
    <tr>
        <td>The person qualifies for a discounted membership</td>
    </tr>
    <tr>
        <td>The person qualifies for a regular membership</td>
    </tr>
    <tr>
        <td>The corporation qualifies for a corporate membership</td>
    </tr>
    <tr>
        <td>The person qualifies for a regular membership</td>
    </tr>
</table>

How to slow down scroll to top speed?

Here is a pure Javascript solution. you may need to remove scroll-behavior: smooth style as this interrupts slow scrolling. in javascript scrollTo function provide the second parameters in milliseconds and function will take that much time to scroll to top.

JS code referred from the answer @ https://stackoverflow.com/a/23844067

var mybutton = document.getElementById("myBtn");
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Bind your button click, scroll direction and effect speed
document.getElementById("myBtn").onclick = function() {
  scrollTo(0, 8000); // it will take 8 seconds to reach to top.

}

// Element to move, time in ms to animate
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);
}

// Element to move, element or px from, element or px to, time in ms to animate
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;
  debugger;
  setTimeout(function() {
    scrollToX(element, xFrom, xTo, t01, speed, step, motion);
  }, step);
}

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

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
  <strong>when the user starts to scroll the page</strong></div>

How to make slow the Scroll-Top Speed

use jquery animate()

$('html,body').animate({ scrollTop: 0 }, 'slow');

refer this stack overflow question

Scroll duration for behaviour = smooth in different browsers

The specification says

The scrolling box is scrolled in a smooth fashion
using a user-agent-defined timing function over a user-agent-defined period of time.
User agents should follow platform conventions, if any.

Right away that makes it a complicated question to which there is likely no answer, or at least no answer which will reliably stay put.

Browsers might

• Aim for a target speed rather than duration, and so scroll for a longer period of time if there are several pages to scroll
• Adjust the scrolling behaviour if many nested scrolling panels are scrolling at once, such as sequencing them one after another (I see some code in Chromium which might be doing something like this)
• Allow it to be user-configurable, so people with poor vision or motion sickness can tweak it to their liking, or disable it
• Defer to the operating system, which might have its own quirks and customizations
• Change any of this with no notice, or the underlying OS might

Here is an excerpt of a comment in some Firefox code to do with smooth scrolling. I did not dig in to whether this is actually strictly relevant to the sorts of scroll you are doing, but it gives an idea:

* |Smooth| scrolls have a symmetrical acceleration and deceleration curve
* modeled with a set of splines that guarantee that the destination will be
* reached over a fixed time interval.  |Smooth| will only be smooth if smooth
* scrolling is actually enabled.  This behavior is utilized by keyboard and
* mouse wheel scrolling events.
*
* |SmoothMsd| implements a physically based model that approximates the
* behavior of a mass-spring-damper system.  |SmoothMsd| scrolls have a
* non-symmetrical acceleration and deceleration curve, can potentially
* overshoot the destination on intermediate frames, and complete over a
* variable time interval.  |SmoothMsd| will only be smooth if cssom-view
* smooth-scrolling is enabled.

And here is a little bit of code you can use to test for yourself. In my experimentation I'm seeing the duration varying based on how far it scrolls, both in Firefox and Chromium, and I'm seeing different speeds in each of those.

const qs = document.querySelector.bind(document);

const viewportHeightInput = qs("#viewport-height");
const contentHeightInput = qs("#content-height");
const viewport = qs("#viewport");
const content = qs("#content");
const output = qs("#output");

function update() {
  viewport.style.height = `${viewportHeightInput.value}px`;
  content.style.height = `${contentHeightInput.value}px`;
}
update();

viewportHeightInput.addEventListener("input", update);
contentHeightInput.addEventListener("input", update);

qs("#to-top").addEventListener("click", () => {
  start = performance.now();
  scrollEvents = 0;
  updateScrollEvents();
  viewport.scrollTo({
    behavior: "smooth",
    top: 0,
  })
});
qs("#to-bottom").addEventListener("click", () => {
  start = performance.now();
  scrollEvents = 0;
  updateScrollEvents();
  viewport.scrollTo({
    behavior: "smooth",
    top: viewport.scrollHeight - viewport.clientHeight,
  })
});

const scrollEventsOutput = qs("#scroll-events");
const elapsedOutput = qs("#elapsed");
let scrollEvents = 0;
let start = performance.now();
let last = null;
viewport.addEventListener("scroll", () => {
  last = performance.now();
  scrollEvents++;
  updateScrollEvents();
});

function updateScrollEvents() {
  scrollEventsOutput.value = scrollEvents;
  elapsedOutput.value = last == null ? 0 : last - start;
}

#controls {
  display: grid;
  grid-template-columns: 10rem 1fr;
}

#controls fieldset {
  display: contents;
}

#viewport {
  overflow: auto;
  border: thick solid orange;
  margin: 4rem 0;
}

#content {
  background-image: linear-gradient(to bottom left, black, white);
  position: relative;
}

#content::before,
#content::after {
  position: absolute;
  left: 0;
  background-color: black;
  color: white;
  display: block;
}

#content::before {
  content: "start";
  top: 0;
}

#content::after {
  content: "end";
  bottom: 0;
}

---

Related Topics