我有一个HTML页面，它只是一个简单的HTML页面，有一个大约有100行的表。
我想一直向下滚动我的HTML页面，然后一旦它完成滚动，要么从顶部重新开始滚动，要么再次将滚动反向到顶部。
我在网上找到了一个例子：https://jsfiddle.net/maherhossain/a24nymv1/.然而，这只能在水平方向上工作。我已经尝试垂直地做这件事，并提交了下面的代码。
我没有犯任何错误。正在加载表。只是自动滚动不起作用。
如果有任何帮助，我将不胜感激。非常感谢。
HTML:
<div id="scroll">
<body>
<table class="content-table" id="demo">
<th></th>
<tr></tr>
<tr></tr>
....
</table>
</body>
</div>
CSS：
#scroll { white-space: nowrap; overflow-y: scroll; }
Javascript+jQuery：
<script>
function animatethis(targetElement, speed) {
var scrollHeight = $(targetElement).get(0).scrollHeight;
var clientHeight = $(targetElement).get(0).clientHeight;
$(targetElement).animate({ scrollTop: scrollHeight - clientHeight },
{
duration: speed,
complete: function () {
targetElement.animate({ scrollTop: 0 },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#scroll'), 5000);
Hello您需要通过css设置targetElement的高度。请在下方结账
function animatethis(targetElement, speed) {
var scrollHeight = $(targetElement).get(0).scrollHeight;
var clientHeight = $(targetElement).get(0).clientHeight;
$(targetElement).animate({ scrollTop: scrollHeight - clientHeight },
{
duration: speed,
complete: function () {
targetElement.animate({ scrollTop: 0 },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#scroll'), 5000);#scroll {overflow-y: scroll; width:100%; height:200px}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll" >[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]
[Starting of the document] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error, quibusdam laudantium illum enim ratione distinctio, dolore fuga assumenda eos ullam quod eveniet, deleniti, possimus vero. Labore impedit quam, quaerat! [End of the Document]</div>