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

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

18 голосов
/ 07 апреля 2011

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

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

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

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

Ответы [ 8 ]

77 голосов
/ 07 апреля 2011

Вы возвращаете 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; 
    });
});
5 голосов
/ 07 апреля 2011

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

Поместив это с вашим 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');
});

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

1 голос
/ 01 марта 2013 
$(window).animate({ scrollTop: 0 }, 'slow');

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

1 голос
/ 07 апреля 2011

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

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

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

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

С наилучшими пожеланиями,

Christian

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

1 голос
/ 07 апреля 2011

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

$('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; 
  });
});

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

0 голосов
/ 18 июля 2018

У меня есть плавное решение двумя способами: плавная прокрутка и плавная кнопка.

С отключенным JavaScript, это просто ссылка внизу страницы на якорь top.
(#, поскольку href может быть довольно нестабильным.)

С включенным JavaScript:

  1. Скрыть div, содержащий ссылку (чтобы избежать мерцания).
  2. Исправьте положение div у нижней правой границы окна.
  3. Удалите атрибут href и добавьте обработчик click для плавной прокрутки. (сохраняет URL и историю браузера аккуратными, и мне не нужно return или preventDefault в функции прокрутки)
  4. Исчезает деление входа / выхода в зависимости от положения прокрутки:
    Отображать ссылку, только если позиция прокрутки> высота окна.
  5. Обновить позицию при изменении размера.

HTML 

<body>
    <a name="top"></a>
    ...
    <div id="scrolltotop" style="display:block;text-align:right">
        <a href="#top" title="scroll to top"><img src="scrolltotop.png" alt="scroll to top"></a>
    </div>
</body>

JQuery 

function scrolltotop_display()
{
    var el=$('#scrolltotop');
    if((window.pageYOffset||document.documentElement.scrollTop)>window.innerHeight)
    { if(!el.is(':visible')) { el.stop(true, true).fadeIn(); } }
    else { if(!el.is(':animated')) { el.stop(true, true).fadeOut(); }}
}
function scrolltotop_position()
{
    var el=$('#scrolltotop');
    el.css('top', window.innerHeight-100);
    el.css('left', window.innerWidth-100);
    scrolltotop_display();
}
$(window).on('load', function(){
    $('#scrolltotop').css('display', 'none');
    $('#scrollToTop').css('position', 'fixed');
    scrolltotop_position();
    $('#scrollToTop a').removeAttr('href');
    $('#scrollToTop a').on('click', function(){$('html, body').animate({scrollTop:0}, 500);});
});
$(window).on('scroll', scrolltotop_display);
$(window).on('resize', scrolltotop_position);
0 голосов
/ 08 августа 2016

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

$(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)
})
})
0 голосов
/ 22 января 2016

Это будет работать во всех браузерах. Он избегает хеш-тега в 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;
      }
    }
  });
...