How do I control the speed of animated scrolling?

Question

I am currently trying to do something like 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;
}




  


  
    Science is the methodical study of nature including testable explanations and predictions. From classical antiquity through the 19th century, science as a type of knowledge was more closely linked to philosophy than it is now and, in fact, in the
      Western world, the term "natural philosophy" encompassed fields of study that are today associated with science, such as astronomy, medicine, and physics. However, during the Islamic Golden Age foundations for the scientific method were laid by
      Ibn al-Haytham in his Book of Optics. While the classification of the material world by the ancient Indians and Greeks into air, earth, fire and water was more philosophical, medieval Middle Easterns used practical, experimental observation to classify
      materials.
    Today, the ever-evolving term "science" refers to the pursuit of knowledge, not the knowledge itself. It is often synonymous with "natural and physical science" and often restricted to those branches of study relating to the phenomena of the material
      universe and their laws. Although the term implies exclusion of pure mathematics, many university faculties include Mathematics Departments within their Faculty of Science. The dominant sense in ordinary use has a narrower use for the term "science."
      It developed as a part of science becoming a distinct enterprise of defining the "laws of nature"; early examples include Kepler's laws, Galileo's laws, and Newton's laws of motion. In this period it became more common to refer to natural philosophy
      as "natural science." Over the course of the 19th century, the word "science" became increasingly associated with the disciplined study of the natural world, including physics, chemistry, geology and biology. This sometimes left the study of human
      thought and society in a linguistic limbo, which was resolved by classifying these areas of academic study as social science. For example, psychology evolved from philosophy, and has grown into an area of study.
    Currently, there are both "hard" (e.g. biological psychology) and "soft" science (e.g. social psychology) fields within the discipline. As a result, and as is consistent with the unfolding of the study of knowledge and development of methods to establish
      facts, each area of psychology employs a scientific method. Reflecting the evolution of the development of knowledge and established facts and the use of the scientific method, Psychology Departments in universities are found within: Faculty of
      Arts and Science, Faculty of Arts, and a Faculty of Science. Similarly, several other major areas of disciplined study and knowledge exist today under the general rubric of "science", such as formal science and applied science.

I am trying to scroll the contents in a smoother way as possible. But unfortunately, it doesn't work. The speed of the scroll goes nuts. When you hover over the up and down arrows, it is not consistent. How am I supposed to control the speed? Thanks in advance.

Praveen Kumar Purushothaman · Accepted Answer

I have done something similar with respect to this. Let me update the code in my original post: Scroll content on hover using jQuery and the Mathematics behind it, where I have mentioned that you should be using a technique to calculate the speed to be consistent, not the time. Right now, the time to scroll is consistent, wherever you are, like, it scrolls in a single second to the opposite direction.

To make it work correctly, you need to consider the scrollTop and the height of the container. I suggest you to change the timing function this way:

// To top
$("#scrollPane .wrap").outerHeight() - $("#scrollPane .wrap").scrollTop()
// To bottom
$("#scrollPane .wrap").height() * 2 - $(this).scrollTop()

This is the approximate time to go up and down. I have changed both the times from 1000 to the above said expressions in the below code. I have checked that it 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;
}




  


  
    Science is the methodical study of nature including testable explanations and predictions. From classical antiquity through the 19th century, science as a type of knowledge was more closely linked to philosophy than it is now and, in fact, in the
      Western world, the term "natural philosophy" encompassed fields of study that are today associated with science, such as astronomy, medicine, and physics. However, during the Islamic Golden Age foundations for the scientific method were laid by
      Ibn al-Haytham in his Book of Optics. While the classification of the material world by the ancient Indians and Greeks into air, earth, fire and water was more philosophical, medieval Middle Easterns used practical, experimental observation to classify
      materials.
    Today, the ever-evolving term "science" refers to the pursuit of knowledge, not the knowledge itself. It is often synonymous with "natural and physical science" and often restricted to those branches of study relating to the phenomena of the material
      universe and their laws. Although the term implies exclusion of pure mathematics, many university faculties include Mathematics Departments within their Faculty of Science. The dominant sense in ordinary use has a narrower use for the term "science."
      It developed as a part of science becoming a distinct enterprise of defining the "laws of nature"; early examples include Kepler's laws, Galileo's laws, and Newton's laws of motion. In this period it became more common to refer to natural philosophy
      as "natural science." Over the course of the 19th century, the word "science" became increasingly associated with the disciplined study of the natural world, including physics, chemistry, geology and biology. This sometimes left the study of human
      thought and society in a linguistic limbo, which was resolved by classifying these areas of academic study as social science. For example, psychology evolved from philosophy, and has grown into an area of study.
    Currently, there are both "hard" (e.g. biological psychology) and "soft" science (e.g. social psychology) fields within the discipline. As a result, and as is consistent with the unfolding of the study of knowledge and development of methods to establish
      facts, each area of psychology employs a scientific method. Reflecting the evolution of the development of knowledge and established facts and the use of the scientific method, Psychology Departments in universities are found within: Faculty of
      Arts and Science, Faculty of Arts, and a Faculty of Science. Similarly, several other major areas of disciplined study and knowledge exist today under the general rubric of "science", such as formal science and applied science.

With the above code, we are doing it by keeping the content's scroll speed as the base and not the time. The time will be dynamically calculated in the above cases based on the scrollTop value of the scrollPane element. I hope this helps.

How do I control the speed of animated scrolling?

Answers (2)

Related Questions