плавная автоматическая прокрутка с использованием JavaScript - PullRequest
9 голосов
/ 23 марта 2012

Я пытаюсь внедрить некоторый код на моей веб-странице для автоматической прокрутки после загрузки страницы.Я использовал функцию Javascript для выполнения автоматической прокрутки и вызывал свою функцию при загрузке страницы, но страница по-прежнему не прокручивается плавно!Есть ли способ автоматической плавной прокрутки моей страницы?

Вот моя функция Javascript:

function pageScroll() {
        window.scrollBy(0,50); // horizontal and vertical scroll increments
        scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}

Ответы [ 6 ]

24 голосов
/ 23 марта 2012

Это не гладко, потому что у вас есть приращение прокрутки на 50 каждые 100 миллисекунд.

измените это значение и количество, на которое вы прокручиваете, на меньшее число, чтобы запустить функцию с иллюзией большогобольше «плавности».

уменьшите значение скорости, чтобы сделать это быстрее или медленнее.

function pageScroll() {
    window.scrollBy(0,1);
    scrolldelay = setTimeout(pageScroll,10);
}

покажется намного плавнее, попробуйте;)

9 голосов
/ 23 марта 2012

Попробуйте использовать jQuery, и этот код:

$(document).ready(function(){
     $('body,html').animate({scrollTop: 156}, 800); 
});

156 - прокрутка позиции до (px), сверху страницы.
800 - продолжительность прокрутки (мс)

1 голос
/ 06 октября 2013

Вы можете использовать функцию jfunc для этого.используйте функцию jFunc_ScrollPageDown и jFunc_ScrollPageUp.http://jfunc.com/jFunc-Functions.aspx.

1 голос
/ 23 марта 2012

Отлаженная анимация зависит от компьютера клиента.Независимо от того, насколько честно вы пишете код, вы никогда не будете удовлетворены тем, как ваша анимация работает в системе ОЗУ 128 МБ.

Вот как вы можете прокручивать, используя jQuery:

$(document).scrollTop("50");

Вы можететакже хочу попробовать Плагин AutoScroll .

1 голос
/ 23 марта 2012

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

0 голосов
/ 23 марта 2012

Поскольку вы пометили вопрос как «jquery», почему бы вам не попробовать что-то вроде .animate()? Эта конкретная функция jquery предназначена для плавной анимации всех видов свойств, включая числовые свойства CSS, а также позицию прокрутки.

...