すべての行をエコーアウトするダッシュボードを作成しましたが、ページの下部をゆっくりとスクロールしてから、上部にゆっくりとスクロールして繰り返す自動スクロールが必要です。私はこれをグーグルで検索しましたが、動作するコードを取得できません。私はjQueryコードを探していましたが、何でもかまいません。
ページは常に調整されるため、固定の高さのスクロールはできません。
さらに情報が必要かどうかはわかりませんが、必要な場合はこの質問を更新します。
よろしくガンビット
21060 次
4 に答える
9
あなたはこのようなものを使うことができます。
//run instantly and then goes after (setTimeout interval)
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 4000);
},4000);
var scrolltopbottom = setInterval(function(){
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 4000);
},4000);
},8000);
//Use this to stop the scroller -> clearInterval(scrolltopbottom);
例： http： //jsfiddle.net/NaP8D/11/
于 2012-09-18T13:16:29.990 に答える
2
より良い結果を得るためにこれを試してみてください
//run instantly and then goes after (setTimeout interval)
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 4000);
},4000);
setInterval(function(){
// 4000 - it will take 4 secound in total from the top of the page to the bottom
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
$('html, body').animate({scrollTop:0}, 4000);
},4000);
},8000);
$('html, body').mouseover(function(e) {
$(this).stop(true);
}).mouseout(function() {
$(this).stop(false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="height:2000px; float:left; width:100%;">
Text text
Text text
Text text
Text text
Text text
Text text
Text text
Text text
Text textv
Text text
Text text
Text text
Text textText text
Text textText text Text textText text
Text textText text Text textText text Text textText text Text textText text Text textText text
<p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p>Text textText text
<p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p>
<p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p> <p>
Text textText text Text textText text Text textText text Text textText text Text textText text
</p>
</div>于 2017-04-12T08:51:31.260 に答える
1
ここでは、これはうまくいくはずです。速度を調整するには、5000をミリ秒単位の時間に変更するだけです。
function scrollDown(el) {
el.animate({
scrollTop: el[0].scrollHeight
}, 5000, function() {
scrollUp(el)
});
};
function scrollUp(el) {
el.animate({
scrollTop: 0
}, 5000, function() {
scrollDown(el);
});
};
scrollDown($("html,body"));
于 2012-09-18T13:28:30.430 に答える
-1
function doSomething() {
$(document).scrollTop($(document).height());
}
setInterval(doSomething, 5000);
これにより、5秒ごとにページの一番下までスクロールします。これは、Facebookのようにユーザースクロールに基づいてコンテンツを自動ロードする場合に便利です。
于 2015-12-10T16:58:53.917 に答える