JQuery анимация прокрутки вверх до 0 не работает на Windows Phone

Я написал веб-сайт, который имеет функцию, которая прокручивает представление пользователей до верхней части страницы. Этот вызов:

$('html,body').animate({scrollTop:0}, 150, 'swing');

Это отлично работает на всех настольных браузерах, но на Windows Phone он только прокручивает пользователя до 180 пикселей, а затем останавливается. Я попытался заменить функцию:

$('html,body').scrollTop(0);

Он привязывается к вершине на рабочих столах, но он прокручивается вверху телефона. Я считаю, что это необходимо для Internet Explorer Mobile, чтобы попытаться плавно анимировать прокрутку и вызывает эту проблему. Если это так (или, если нет, может кто-то меня поправить), как я могу переопределить эту функцию, чтобы заставить анимацию работать?

ИЗМЕНИТЬ

Хотя он не идеален, он работает в ограниченной емкости, я заменил код прокрутки на это:

$('html,body').animate({scrollTop:0}, 150, 'swing', function() {
    $('html,body').scrollTop(0);
});

Но было бы хорошо знать, есть ли возможность отключить плавную прокрутку в Mobile IE программно.

Ответы

Ответ 1

В Windows Phone 8 я столкнулся с той же проблемой. В настоящее время я делаю следующий взлом, где он ждет, пока анимация "завершена", а затем выполнит стандартное окно window.scrollTo, чтобы убедиться, что оно прокручено до нужного места.

scrollHmtlBody: function (scrollToTarget, duration) {
    $('html, body').animate({ scrollTop: scrollToTarget }, duration);

    // Windows Phone doesn't animate properly, 
    // this makes sure it scrolls to the appropriate position (eventually)
    setTimeout(function() { 
        window.scrollTo(0, scrollToTarget);
    }, duration + 75);
}

Я не доволен результатом - он работает, но из-за задержки 75 мс он имеет нерешительность, прежде чем он "завершит" анимацию прокрутки. С меньшей задержкой, Windows Phone, по-видимому, отказывается выполнять действие scrollTo (возможно, он думает, что в настоящее время он "прокручивается"?)

Я могу в конечном итоге прибегнуть к предложению if/else с обнаружением устройства, но сейчас я пытаюсь найти лучшее решение, а не идти по этой дороге.

Ответ 2

Ни одно из этих решений не работало для меня ни на Windows Phone 7. Что было сделано для удаления animate() и полагаться просто на scrollTop на тег html. Надеюсь, это поможет кому-то.

Это:

$('html').scrollTop(distance);

вместо:

$('html,body').animate({ scrollTop: distance }, 250);

Ответ 3

Я столкнулся с той же проблемой на своем Windows Phone 8. В моем случае мне нужно было прокрутить окно донизу, но по телефону это просто не сработало.

В конце я использовал комбинацию решений @topherg и @LocalPCGuy с небольшим изменением, чтобы получить экран снизу.

Здесь мой код может помочь кому-то другому:

$("html, body").stop().animate({
    scrollTop: $("#last-message").offset().top
}, 2000, 'swing', function () {
    $("html, body").scrollTop($("#last-message").offset().top);
});

setTimeout(function () {
    window.scrollTo(0, document.body.scrollHeight);
}, 2075);

Где # последнее сообщение - это div, который я хочу прокрутить. Он чувствует себя немного взломанным, но так же работает Windows Phone: P

Ответ 4

Я решил это таким образом

Ссылка: < a href= "# about" data-target = "about" class= "scroll-to" > About </a>

Имя привязки #about позволяет работать с устройствами с плавной прокруткой

        function scrollToElement(elementId) {
            var top = $("#" + elementId).offset().top;
            $('html,body').animate({ scrollTop: top }, 250);
        }

        $(".scroll-to").click(function () {
            scrollToElement($(this).data("target"));
        });