jQuery scrollTop не работает в Chrome, но работает в Firefox

Question

Я использовал функцию scrollTop в jQuery для навигации вверх, но странным образом «плавная анимированная прокрутка» перестала работать в Safari и Chrome (прокрутка без плавной анимации) после внесения некоторых изменений.

Но в Firefox он все еще работает без сбоев.Что может быть не так?

Вот функция jQuery, которую я использовал,

jQuery:

$('a#gotop').click(function() {
    $("html").animate({ scrollTop: 0 }, "slow");
    //alert('Animation complete.');
    //return false;
});

HTML

<a id="gotop" href="#">Go Top </a>

CSS

#gotop {
      cursor: pointer;
      position: relative;
      float: right;
      right: 20px;
      /*top:0px;*/
}

Answer 1

Попробуйте использовать $("html,body").animate({ scrollTop: 0 }, "slow");

Это работает для меня в Chrome.

Answer 2

Если ваш элемент CSS html имеет следующую разметку overflow, scrollTop не будет работать.

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

Чтобы разрешить прокрутку scrollTop, измените разметку, удалите overflow разметкаот элемента html и добавьте элемент body.

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}

Answer 3

Работает в обоих браузерах, если вы используете scrollTop () с 'document':

$(document).scrollTop();

... вместо «html» или «body». В противном случае он не будет работать одновременно в обоих браузерах.

Answer 4

Я успешно использовал это в Chrome, Firefox и Safari. Еще не смог протестировать его в IE.

if($(document).scrollTop() !=0){
    $('html, body').animate({ scrollTop: 0 }, 'fast');
}

Причиной утверждения "если" является проверка того, готов ли пользователь в начале сайта. Если так, не делайте анимацию. Таким образом, нам не нужно сильно беспокоиться о разрешении экрана.

Причина, по которой я использую $(document).scrollTop вместо ie. $('html,body') является причиной, по которой Chrome всегда возвращает 0 по какой-либо причине.

Answer 5

У меня была такая же проблема с прокруткой в ​​хроме.Итак, я удалил эти строки кодов из моего файла стилей.

html{height:100%;}
body{height:100%;}

Теперь я могу играть с прокруткой, и она работает:

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");

Answer 6

Прокрутите тело и проверьте, работает ли оно:

function getScrollableRoot() {
    var body = document.body;
    var prev = body.scrollTop;
    body.scrollTop++;
    if (body.scrollTop === prev) {
        return document.documentElement;
    } else {
        body.scrollTop--;
        return body;
    }
}


$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow");

Это более эффективно, чем $("html, body").animate, потому что используется только одна анимация, а не две.Таким образом, срабатывает только один обратный вызов, а не два.

Answer 7

Я использую:

var $scrollEl = $.browser.mozilla ? $('html') : $('body');

, потому что прочитано jQuery scrollTop не работает в Chrome, но работает в Firefox

Answer 8

// if we are not already in top then see if browser needs html or body as selector
var obj = $('html').scrollTop() !== 0 ? 'html' : 'body';

// then proper delegate using on, with following line:
$(obj).animate({ scrollTop: 0 }, "slow");

НО, лучший подход - это прокрутить идентификатор в вашем окне просмотра, используя только собственный API (так как вы в любом случае прокручиваете вверх, это может быть только ваш внешний div):

document.getElementById('wrapperIDhere').scrollIntoView(true);

Answer 9

может быть, вы имеете в виду top: 0

$('a#gotop').click(function() {
  $("html").animate({ top: 0 }, "slow", function() { 
                                           alert('Animation complete.'); });
  //return false;
});

из одушевленных документов

.animate ( свойства , [продолжительность], [замедление], [обратный вызов])
properties Карта свойств CSS, к которой будет двигаться анимация.
...

или $(window).scrollTop()?

$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                                                              alert('Animation complete.'); });
  //return false;
});

Answer 10

 $("html, body").animate({ scrollTop: 0 }, "slow");

Этот CSS конфликтует с прокруткой вверх, поэтому позаботьтесь об этом

 html, body {
         overflow-x: hidden;        
    }