javascript - How do I control the speed of animated scrolling? -

i trying this:

$(function() {    $(".prev").mouseover(function() {      $("#scrollpane").animate({        "scrolltop": 0      }, 1000);    }).mouseout(function() {      $("#scrollpane").stop();    });    $(".next").mouseover(function() {      $("#scrollpane").animate({        "scrolltop": $("#scrollpane .wrap").height()      }, 1000);    }).mouseout(function() {      $("#scrollpane").stop();    });  });

* {    margin: 0;    padding: 0;    list-style: none;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    line-height: 1;  }    body {    margin: 15px auto;    width: 450px;  }    #scrollpane {    padding: 10px;    max-height: 250px;    overflow: hidden;    background-color: #fff;  }    #scrollpane p {    margin: 0 0 10px;    text-align: justify;  }    .button {    display: block;    background-color: #ccf;    border-radius: 10px;    cursor: pointer;    text-align: center;    font-size: 0.75em;    padding: 0 0 1px;  }

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />  <div class="button prev">    <i class="fa fa-chevron-up"></i>  </div>  <div id="scrollpane">    <div class="wrap">      <p>science methodical study of nature including testable explanations , predictions. classical antiquity through 19th century, science type of knowledge more closely linked philosophy and, in fact, in        western world, term "natural philosophy" encompassed fields of study today associated science, such astronomy, medicine, , physics. however, during islamic golden age foundations scientific method laid        ibn al-haytham in book of optics. while classification of material world ancient indians , greeks air, earth, fire , water more philosophical, medieval middle easterns used practical, experimental observation classify        materials.</p>      <p>today, ever-evolving term "science" refers pursuit of knowledge, not knowledge itself. synonymous "natural , physical science" , restricted branches of study relating phenomena of material        universe , laws. although term implies exclusion of pure mathematics, many university faculties include mathematics departments within faculty of science. dominant sense in ordinary use has narrower use term "science."        developed part of science becoming distinct enterprise of defining "laws of nature"; examples include kepler's laws, galileo's laws, , newton's laws of motion. in period became more common refer natural philosophy        "natural science." on course of 19th century, word "science" became increasingly associated disciplined study of natural world, including physics, chemistry, geology , biology. left study of human        thought , society in linguistic limbo, resolved classifying these areas of academic study social science. example, psychology evolved philosophy, , has grown area of study.</p>      <p>currently, there both "hard" (e.g. biological psychology) , "soft" science (e.g. social psychology) fields within discipline. result, , consistent unfolding of study of knowledge , development of methods establish        facts, each area of psychology employs scientific method. reflecting evolution of development of knowledge , established facts , use of scientific method, psychology departments in universities found within: faculty of        arts , science, faculty of arts, , faculty of science. similarly, several other major areas of disciplined study , knowledge exist today under general rubric of "science", such formal science , applied science.</p>    </div>  </div>  <div class="button next">    <i class="fa fa-chevron-down"></i>  </div>

i trying scroll contents in smoother way possible. unfortunately, doesn't work. speed of scroll goes nuts. when hover on , down arrows, not consistent. how supposed control speed? in advance.

i have done similar respect this. let me update code in original post: scroll content on hover using jquery , mathematics behind it, have mentioned should using technique calculate speed consistent, not time. right now, time scroll consistent, wherever are, like, scrolls in single second opposite direction.

to make work correctly, need consider scrolltop , height of container. suggest change timing function way:

// top $("#scrollpane .wrap").outerheight() - $("#scrollpane .wrap").scrolltop() // bottom $("#scrollpane .wrap").height() * 2 - $(this).scrolltop() 

this approximate time go , down. have changed both times 1000 above said expressions in below code. have checked works too.

$(function () {    $(".prev").mouseover(function () {      $("#scrollpane").animate({        "scrolltop": 0      }, $("#scrollpane .wrap").outerheight() - $("#scrollpane .wrap").scrolltop());    }).mouseout(function () {      $("#scrollpane").stop();    });    $(".next").mouseover(function () {      $("#scrollpane").animate({        "scrolltop": $("#scrollpane .wrap").height()      }, $("#scrollpane .wrap").height() * 2 - $(this).scrolltop());    }).mouseout(function () {      $("#scrollpane").stop();    });  });

* {    margin: 0;    padding: 0;    list-style: none;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    line-height: 1;  }    body {    margin: 15px auto;    width: 450px;  }    #scrollpane {    padding: 10px;    max-height: 250px;    overflow: hidden;    background-color: #fff;  }    #scrollpane p {    margin: 0 0 10px;    text-align: justify;  }    .button {    display: block;    background-color: #ccf;    border-radius: 10px;    cursor: pointer;    text-align: center;    font-size: 0.75em;    padding: 0 0 1px;  }

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />  <div class="button prev">    <i class="fa fa-chevron-up"></i>  </div>  <div id="scrollpane">    <div class="wrap">      <p>science methodical study of nature including testable explanations , predictions. classical antiquity through 19th century, science type of knowledge more closely linked philosophy and, in fact, in        western world, term "natural philosophy" encompassed fields of study today associated science, such astronomy, medicine, , physics. however, during islamic golden age foundations scientific method laid        ibn al-haytham in book of optics. while classification of material world ancient indians , greeks air, earth, fire , water more philosophical, medieval middle easterns used practical, experimental observation classify        materials.</p>      <p>today, ever-evolving term "science" refers pursuit of knowledge, not knowledge itself. synonymous "natural , physical science" , restricted branches of study relating phenomena of material        universe , laws. although term implies exclusion of pure mathematics, many university faculties include mathematics departments within faculty of science. dominant sense in ordinary use has narrower use term "science."        developed part of science becoming distinct enterprise of defining "laws of nature"; examples include kepler's laws, galileo's laws, , newton's laws of motion. in period became more common refer natural philosophy        "natural science." on course of 19th century, word "science" became increasingly associated disciplined study of natural world, including physics, chemistry, geology , biology. left study of human        thought , society in linguistic limbo, resolved classifying these areas of academic study social science. example, psychology evolved philosophy, , has grown area of study.</p>      <p>currently, there both "hard" (e.g. biological psychology) , "soft" science (e.g. social psychology) fields within discipline. result, , consistent unfolding of study of knowledge , development of methods establish        facts, each area of psychology employs scientific method. reflecting evolution of development of knowledge , established facts , use of scientific method, psychology departments in universities found within: faculty of        arts , science, faculty of arts, , faculty of science. similarly, several other major areas of disciplined study , knowledge exist today under general rubric of "science", such formal science , applied science.</p>    </div>  </div>  <div class="button next">    <i class="fa fa-chevron-down"></i>  </div>

with above code, doing keeping content's scroll speed base , not time. time dynamically calculated in above cases based on scrolltop value of scrollpane element. hope helps.