Чи можливо анімувати scrollTop за допомогою jQuery?

Я хочу плавно прокрутити вниз. Мені не хочеться писати для цього функції - особливо якщо jQuery вже має.

Ви можете просто використовувати .animate()в scrollTopвласність, як це:

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

Відповідь Ніка працює чудово. Будьте обережні, вказуючи функцію завершення () всередині виклику 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');
            }
        }
    }
);

Відповідь Ніка чудово працює, а налаштування за замовчуванням - хороші, але ви можете більш повно керувати прокруткою, виконавши всі додаткові налаштування.

ось як це виглядає в API:

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

щоб ви могли зробити щось подібне:

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

ось сторінка api з функцією jQuery .animate: http://api.jquery.com/animate/

Як згадувала Кіта, існує проблема із запуском декількох зворотних викликів під час анімації на "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...
    })
});

ОНОВЛЕННЯ - - -

Наведена вище спроба виявлення функцій не вдалася. Схоже, немає однолінійного способу зробити це як сторінка веб-переглядачів webkitYOYOU властивість завжди повертає нуль, коли існує доктіп. Натомість я знайшов спосіб використовувати обіцянку робити єдиний зворотний дзвінок щоразу, коли анімація виконується.

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

У мене те, що я вважаю, є кращим рішенням, ніж $('html, body')хакер.

Це не однолінійний вклад, але проблема, з якою у мене виникло, $('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);
                    }
                }
            }
        );
    }
}

У мене виникли проблеми, коли анімація завжди починалася вгорі сторінки після оновлення сторінки в інших прикладах.

Я вирішив це, не анімувавши css безпосередньо, а скоріше закликаючи window.scrollTo();кожен крок:

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

Це також вирішує проблему htmlvs, bodyоскільки вона використовує крос-браузер JavaScript.

Перегляньте сторінку http://james.padolsey.com/javascript/fun-with-jquerys-animate/, щоб отримати докладнішу інформацію про те, що можна зробити з функцією анімації jQuery.

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

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

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

Спробуйте прокручувати плагін.

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

Якщо ви хочете рухатися вниз в кінці сторінки (тому вам не потрібно прокручувати вниз), ви можете скористатися:

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

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

перехресний код браузера:

$(window).scrollTop(300); 

це без анімації, але працює скрізь