Возможно ли оживить scrollTop с помощью jQuery?

Ответ 1

Вы можете просто использовать .animate() свойство scrollTop, например:

$("html, body").animate({ scrollTop: "300px" });

Ответ 2

Ник отвечает отлично. Будьте осторожны при указании функции complete() внутри вызова animate(), потому что он будет выполняться дважды, так как вы объявили два селектора (html и body).

$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            alert('this alert will popup twice');
        }
    }
);

Здесь вы можете избежать двойного обратного вызова.

var completeCalled = false;
$("html, body").animate(
    { scrollTop: "300px" },
    {
        complete : function(){
            if(!completeCalled){
                completeCalled = true;
                alert('this alert will popup once');
            }
        }
    }
);

Ответ 3

Ответ на Nick отлично работает, и настройки по умолчанию хороши, но вы можете более точно управлять прокруткой, выполнив все дополнительные настройки.

вот что выглядит в API:

.animate( properties [, duration] [, easing] [, complete] )

чтобы вы могли сделать что-то вроде этого:

.animate( 
    {scrollTop:'300px'},
    300,
    swing,
    function(){ 
       alert(animation complete! - your custom code here!); 
       } 
    )

здесь находится функция jQuery.animate api: http://api.jquery.com/animate/

Ответ 4

У меня есть то, что я считаю лучшим решением, чем $('html, body') hack.

Это не однострочный, но проблема с $('html, body') заключается в том, что если вы входите в журнал $(window).scrollTop() во время анимации, вы увидите, что значение перескакивает повсеместно, иногда на сотни пикселей ( хотя я не вижу ничего подобного, что происходит визуально). Мне нужно, чтобы значение было предсказуемым, чтобы я мог отменить анимацию, если пользователь схватил полосу прокрутки или закрутил колесико мыши во время автоматического прокрутки.

Здесь функция будет плавно прокручиваться:

function animateScrollTop(target, duration) {
    duration = duration || 16;
    var scrollTopProxy = { value: $(window).scrollTop() };
    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target }, 
            { duration: duration, step: function (stepValue) {
                var rounded = Math.round(stepValue);
                $(window).scrollTop(rounded);
            }
        });
    }
}

Ниже представлена ​​более сложная версия, которая отменяет анимацию при взаимодействии с пользователем, а также восстанавливает до достижения целевого значения, что полезно при попытке установить scrollTop мгновенно (например, просто называть $(window).scrollTop(1000) - в моем опыте, это не работает примерно в 50% случаев.)

function animateScrollTop(target, duration) {
    duration = duration || 16;

    var $window = $(window);
    var scrollTopProxy = { value: $window.scrollTop() };
    var expectedScrollTop = scrollTopProxy.value;

    if (scrollTopProxy.value != target) {
        $(scrollTopProxy).animate(
            { value: target },
            {
                duration: duration,

                step: function (stepValue) {
                    var roundedValue = Math.round(stepValue);
                    if ($window.scrollTop() !== expectedScrollTop) {
                        // The user has tried to scroll the page
                        $(scrollTopProxy).stop();
                    }
                    $window.scrollTop(roundedValue);
                    expectedScrollTop = roundedValue;
                },

                complete: function () {
                    if ($window.scrollTop() != target) {
                        setTimeout(function () {
                            animateScrollTop(target);
                        }, 16);
                    }
                }
            }
        );
    }
}

Ответ 5

Как упоминалось в Kita, существует проблема с запуском нескольких обратных вызовов, когда вы живите как на "html", так и "body". Вместо того, чтобы анимировать и блокировать последующие обратные вызовы, я предпочитаю использовать некоторые основные функции обнаружения и только анимировать свойство scrollTop для одного объекта.

Принятый ответ на этот другой поток дает некоторое представление о том, какое свойство scrollTop объекта мы должны попытаться оживить: pageYOffset Scrolling and Animation в IE8

// UPDATE: don't use this... see below
// only use 'body' for IE8 and below
var scrollTopElement = (window.pageYOffset != null) ? 'html' : 'body';

// only animate on one element so our callback only fires once!
$(scrollTopElement).animate({ 
        scrollTop: '400px' // vertical position on the page
    },
    500, // the duration of the animation 
    function() {       
        // callback goes here...
    })
});

UPDATE - - -

Вышеприведенная попытка обнаружения функции не работает. Кажется, что не существует однострочного способа сделать это, поскольку браузер типа Webkit свойство pageYOffset всегда возвращает ноль, когда есть doctype. Вместо этого я нашел способ использовать обещание сделать один обратный вызов для каждого раза, когда анимация выполняется.

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

Ответ 6

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

Я исправил это, не анимируя css напрямую, а скорее называя window.scrollTo(); на каждом шаге:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Это также распространяется на проблему html vs body, поскольку она использует кросс-браузерный JavaScript.

Посмотрите http://james.padolsey.com/javascript/fun-with-jquerys-animate/ для получения дополнительной информации о том, что вы можете сделать с функцией анимации jQuery.

Ответ 7

Попробуйте плагин scrollTo.

Ответ 8

Вы можете использовать анимацию jQuery для прокрутки страницы с определенной продолжительностью:

$("html, body").animate({scrollTop: "1024px"}, 5000);

где 1024px - смещение прокрутки, а 5000 - продолжительность анимации в миллисекундах.

Ответ 9

$(".scroll-top").on("click", function(e){
   e.preventDefault();
   $("html, body").animate({scrollTop:"0"},600);
});

Ответ 10

Но если вы действительно хотите добавить анимацию во время прокрутки, вы можете попробовать мой простой плагин (AnimateScroll), который в настоящее время поддерживает больше, чем 30 стилей стилей

Ответ 11

Если вы хотите перейти в конец страницы (чтобы вам не нужно было прокручивать вниз), вы можете использовать:

$('body').animate({ scrollTop: $(document).height() });

Ответ 12

код кросс-браузера:

$(window).scrollTop(300); 

он без анимации, но работает везде