JQuery кросс-браузер "прокрутка вверх", с анимацией

Сейчас я использую это:

$('#go-to-top').each(function(){
  $(this).click(function(){ 
    $('html').animate({ scrollTop: 0 }, 'slow'); return true; 
  });
});

который не работает в Chrome, и в Opera я получаю небольшое мерцание: браузер мгновенно прокручивается вверх, затем возвращается в нижнюю часть, а затем начинает медленно прокручиваться назад, как это должно быть.

Есть ли лучший способ сделать это?

Ответ 1

Вы возвращаете true из функции щелчка, поэтому он не будет препятствовать поведению браузера по умолчанию (т.е. перейти к якорю go-to-top. Как сказал Марк, используйте:

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

Итак, ваш код должен выглядеть следующим образом:

$('#go-to-top').each(function(){
    $(this).click(function(){ 
        $('html,body').animate({ scrollTop: 0 }, 'slow');
        return false; 
    });
});

Ответ 2

Чтобы заставить его работать в опера, этот ответ оказался полезным.

Поместите это с помощью click()

$(this).click(function() {
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
    }, 'slow');
});

Пример кода в jsfiddle.

Обратите внимание, что если все, что вы делаете с .each(), назначает обработчик кликов, который вам не нужен для итерации по коллекции, он может быть упрощен до этого:

$('#go-to-top').click(function(){ 
    $(window.opera ? 'html' : 'html, body').animate({
        scrollTop: 0
        }, 'slow');
});

Кроме того, если существует более одного элемента с id #go-to-top, ваша разметка будет недействительной, попробуйте переключить ее на класс .go-to-top

Ответ 3

может быть что-то вроде

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

а также html.

edit >

$('#go-to-top').each(function(){
  $(this).click(function(){ 
    $('html').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('body').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('document').animate({ scrollTop: 0 }, 'slow'); return true; 
    $('window').animate({ scrollTop: 0 }, 'slow'); return true; 
  });
});

должен охватывать все браузеры!

Ответ 4

Hm... странно, с jsFiddle я могу заставить его работать отлично в Opera (ver 11.01), но в Chrome он просто вскакивает вверх и не оживляет его, как вы хотите.

Вы можете использовать jsFiddle здесь, если хотите: http://jsfiddle.net/H7RFU/

Я надеюсь, что это поможет немного, хотя на самом деле это не ответ.

Если то, что я сделал, не так, как выглядит ваш html и т.д., пожалуйста, обновите его и добавьте его.

С уважением,

Christian

Предостережение: я ранее не использовал функцию сохранения jsFiddle, поэтому я не знаю, как долго она была сохранена.

Ответ 5

$(window).animate({ scrollTop: 0 }, 'slow');

Работает кросс-браузер

Ответ 6

Это будет работать во всех браузерах. Это позволяет избежать хэш-тега на URL-адресе, поэтому гладкий свиток завершен!

 $('#back-top a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {

        $('html,body').animate({

          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });

Ответ 7

Я использую это, это также просто

$(document).ready(function(e) {
var a = 400,
t = 1200,
l = 700,
s = e(".scrool-top");
e(window).scroll(function() {
e(this).scrollTop() > a ? s.addClass("scrool-is-visible") : s.removeClass("scrool-is-visible scrool-fade-out"), e(this).scrollTop() > t && s.addClass("scrool-fade-out")
}), s.on("click", function(a) {
a.preventDefault(), e("body,html").animate({
scrollTop: 0
}, l)
})
})