Автопрокрутка вниз страницы, затем вверх и повторите

Я создал панель инструментов, которая отображает все строки, но мне нужна автоматическая прокрутка, которая будет медленно прокручивать нижнюю часть страницы, а затем медленно прокручивать обратно вверх и повторять. Я гуглил это и не могу получить рабочий код. Я искал коды jQuery, но все подойдет.

Поскольку страница будет постоянно корректироваться, она не может иметь фиксированную высоту прокрутки.

Не уверен, что вам нужна дополнительная информация, но если вам это нужно, я обновлю этот вопрос.

С уважением Гамбит


jquery autoscroll
person TheGambit    schedule 18.09.2012    source источник
comment
Покажите нам код, который вы уже пробовали.   -  person Lowkase    schedule 18.09.2012
comment
Что ж, пробовал просто автоматически прокрутить страницу вниз, но это не сработало. функция pageScroll() { window.scrollBy(0,1); scrolldelay = setTimeout('pageScroll()',10); }   -  person TheGambit    schedule 18.09.2012
comment
См. мой ответ ниже, использование обратного вызова функции анимации позволяет вам иметь два метода, вызывающих друг друга взад и вперед, поэтому он многократно прокручивается вверх и вниз.   -  person CaffGeek    schedule 18.09.2012

Ответы (4)


arrow_upward
9
arrow_downward

Вы могли бы использовать что-то вроде этого.

//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/

person TimTastic    schedule 18.09.2012
comment
Это работает, но как уменьшить скорость при прокрутке вниз? - person TheGambit; 18.09.2012
comment
@TheGambit Если я правильно вас понимаю, вам нужно использовать смягчение в методе анимации. Вам нужно изменить его с линейного на что-то другое. Включите jquery ui для некоторых альтернатив: jqueryui.com/demos/effect/easing.html - person Johan; 18.09.2012
comment
Отредактируйте мой пост с обновлением. просто увеличьте или уменьшите значение 4000 до любой скорости и интервала, которые вы хотите. - person TimTastic; 18.09.2012
comment
Это большое спасибо. Не могли бы вы просто прокомментировать, что представляет собой каждое из 4000 чисел? - person TheGambit; 18.09.2012
comment
Обновил свой пост еще раз с объяснением. Наслаждаться! :) - person TimTastic; 18.09.2012
comment
Спасибо, Тим. Просто прочитайте последнюю строку в коде. Можно ли использовать клавишу, например пробел, для включения и выключения прокрутки? - person TheGambit; 18.09.2012
comment
Да, это возможно. Заголовок stackoverflow.com/questions/2249203/ - person TimTastic; 18.09.2012

arrow_upward
2
arrow_downward

вы должны попробовать это для лучшего результата

//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>

http://jsfiddle.net/neelu/gvvnd0tt/8/

person neel upadhyay    schedule 12.04.2017

arrow_upward
1
arrow_downward

Здесь это должно работать хорошо, просто измените 5000 на время в мс, чтобы отрегулировать скорость.

http://jsfiddle.net/BDc6S/3/

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"));​
person CaffGeek    schedule 18.09.2012
comment
Пауза между остановкой и началом прокрутки увеличивается с каждым циклом. - person dbd; 08.01.2018

arrow_upward
-1
arrow_downward 

function doSomething() {
  $(document).scrollTop($(document).height());
}
setInterval(doSomething, 5000);

Каждые 5 секунд страница будет прокручиваться вниз. Это будет полезно, если у вас есть автоматическая загрузка контента на основе пользовательской прокрутки, такой как facebook.

person FreeBird    schedule 10.12.2015