Вопрос по jquery – Прокрутить к началу страницы

20

Есть ли простой способ заставить браузер прокрутить вверх, если нажата кнопка?

я пытался

jQuery('html').scrollTop();
jQuery('body').scrollTop();
jQuery(window).scrollTop();

Ни один из них, кажется, не прокручивается до верхней части страницы.

Это потому чтоscrollTop() фактически не прокручивает страницу, если не задано значение; без значения он просто возвращает значение пикселя, представляющееscroll position в качестве смещения отtop страницы. Warpling

Ваш Ответ

5   ответов
24

Простой чистый JavaScript, также работает в мобильном телефоне

window.scrollTo(0,0);
2

Поскольку никто не упомянул необходимый HTML, я добавлю его сюда.

Сначала создайте свой якорный элемент:

<a href="#" title="Scroll to Top" class="ScrollTop">Scroll To Top</a>

Обратите внимание, что на класс ссылается следующий jQuery.

Затем добавьте свой JQuery:

$(document).ready(function(){
  $('.ScrollTop').click(function() {
    $('html, body').animate({scrollTop: 0}, 800);
  return false;
    });
});

Чтобы настроить скорость анимации, измените «800». значение.

49

Из-за кросс-браузерной странности некоторые браузеры реагируют на'html' а некоторые к'body', И может быть, это просто моя удача, но.scrollTop(0) никогда не работал для меня, чтобы переместить страницу. Дайте этому шанс:

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

Эта версия протестирована и кроссбраузерна для всех настольных браузеров и мобильных устройств.

CSS tricks - это потрясающий блог, из которого я многому научился, но иногда я все же не согласен с ними;)
Это работает как шарм. Не удалось заставить его сломаться в FF, IE или Safari. Еще не проверили хром. Спасибо! James Wilson
Кстати, я пробовал этот код тоже. Меня устраивает. Но думал, что трюки css - отличное имя, и, возможно, они по какой-то причине поставили длинный код :) Спасибо за разъяснения :) Мне тоже понравился ответ Марио :)
0

Это кросс-браузерный способ,

function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
        var el = arguments[i],
        $scrollElement = $(el);
        if ($scrollElement.scrollTop()> 0) {
            return el;
        } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
                return el;
            }
        }
    }
    return [];
}

var scrollElem = scrollableElement('html', 'body');

$(scrollElem).scrollTop(0);

Code from css-tricks

Вы знаете, лучше ли этот метод, чем Fresheyeball? Или они делают то же самое, что касается стабильности браузера? James Wilson
@JamesWilson они делают в основном то же самое, за исключением того, что этот метод проходит ненужную работу по определению'body' или же'html' перед его использованием. Честно говоря, это много лишнего кода для решения.
6

Вы можете использовать это:

jQuery('body').scrollTop(0);

или это:

jQuery(window).scrollTop(0);

или, наконец, это:

jQuery('html').scrollTop(0);

Итак, для того, чтобы позвонитьscrollTop метод и сделать прокрутку страницы, вы должны передать аргумент с числовым значением, представляющим позицию scrollTop. В противном случае это будет работать так, как будто вам нужно получить позицию scrollTop.

Два последних метода должны постоянно работать во всех браузерах, в то время как первый может не работать в некоторых версиях IE.

@JamesWilson Это действительно зависит. Вы можете попробовать метод Fresheyball, но без анимации, просто:jQuery('html, body').scrollTop(0);
Я пошел с Freshey, похоже, он работает во всех браузерах. Спасибо за ваш ответ, а они действительно сработали. James Wilson
@JamesWilson Смотрите мой ответ для простого кросс-браузерного решения.
Я не мог получить "тело" работать, но "html" работал до тех пор, пока я перешел на 0. Вы знаете, являются ли они кросс-браузерными или в какой версии этот метод не работает случайно? James Wilson
@JamesWilson Добро пожаловать :)

Похожие вопросы