it-swarm.com.ru

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

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

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

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

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

17
Alex

Вы возвращаете true из функции click, так что это не помешает поведению браузера по умолчанию (т. Е. Переход к якору 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; 
    });
});
74
BenM

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

Поместить это с вашей 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

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

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

1
user2122751

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

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

а также HTML.

Правка> 

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

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

1
Xand94

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

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

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

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

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

Кристиан

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

1
Holger

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

$(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
Sajjad Hossain

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

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

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

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

  1. Скрыть div, содержащий ссылку (чтобы избежать мерцания).
  2. Исправьте положение div у нижней правой границы окна.
  3. Удалите атрибут href и добавьте обработчик click для плавной прокрутки . (Поддерживает чистоту URL-адреса и истории браузера, и мне не нужны никакие return или preventDefault в функции прокрутки)
  4. Fade div in/out в зависимости от положения прокрутки:
    Отображать ссылку, только если позиция прокрутки> высота окна.
  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
Titus