我目前正在尝试这样做：
$(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 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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
<div class="button next">
<i class="fa fa-chevron-down"></i>
</div>
我试图以更顺畅的方式滚动内容。但不幸的是，它并没有奏效。卷轴的速度变得疯狂。当您将鼠标悬停在向上和向下箭头上时，它不一致。我该怎么控制速度？提前谢谢。
答案 0 :(得分：1)
$(function() {
$(".prev").mouseover(function() {
$("#scrollPane").animate({
"scrollTop": 0
}, 10000); // <- this number is animation speed
}).mouseout(function() {
$("#scrollPane").stop();
});
$(".next").mouseover(function() {
$("#scrollPane").animate({
"scrollTop": $("#scrollPane .wrap").height()
}, 10); // <- this number is animation speed
}).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 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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
<div class="button next">
<i class="fa fa-chevron-down"></i>
</div>
答案 1 :(得分：1)
我做了类似的事情。让我更新原始帖子中的代码：Scroll content on hover using jQuery and the Mathematics behind it，我已经提到过你应该使用一种技术来计算速度是否一致，而不是时间。现在，滚动的时间是一致的，无论你在哪里，它都会在一秒钟内滚动到相反的方向。
要使其正常工作，您需要考虑容器的scrollTop和height。我建议你这样改变计时功能：
// To top
$("#scrollPane .wrap").outerHeight() - $("#scrollPane .wrap").scrollTop()
// To bottom
$("#scrollPane .wrap").height() * 2 - $(this).scrollTop()
这是上下的大致时间。我在以下代码中将时间从1000更改为上述表达式。我已经检查过它也有效。
$(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 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.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
<div class="button next">
<i class="fa fa-chevron-down"></i>
</div>
使用上面的代码，我们通过将内容的滚动速度保持为基础而不是时间来实现。将根据scrollTop元素的scrollPane值在上述情况下动态计算时间。我希望这会有所帮助。