Jquery прокрутка html страницы

How to scroll to top of page with JavaScript/jQuery?

Is there a way to control browser scrolling with JavaScript/jQuery? When I scroll my page half way down, then trigger a reload, I want the page to go pack to the top, but instead it tries to find the last scroll position. So I did this:

But no luck. EDIT: So both your answers worked when I call them after the page loads-Thanks. However, if I just do a refresh on the page, looks like the browser calculates and scrolls to its old scroll position AFTER the .ready event (I tested the body onload() function too). So the follow up is, is there a way to PREVENT the browser scrolling to its past position, or to re-scroll to the top AFTER it does its thing?

@MPD- Excellent idea! . but just tried it and the scroll adjustment still happens after that. Thanks for the tip though, it actually helps with another question of mine: stackoverflow.com/questions/4210829/…. If you want to answer that one I’ll give you some ups.

@Yarin Sorry you had to wait 9 years for this. You need set the history.scrollRestoration before you try to scroll. See my answer.

28 Answers 28

Cross-browser, pure JavaScript solution:

document.body.scrollTop = document.documentElement.scrollTop = 0; 

To make this work on my IE/Chrome/FF cross-browsers, I must combine Niet Dark Absol answer and user113716 answer (using timeout).

Just want to point out that from my testing (on modern/2018 versions of chrome included) that this solution works more reliably

You almost got it — you need to set the scrollTop on body , not window :

Maybe you can add a blank anchor to the top of the page:

$(function() < $('').insertBefore($('body').children().eq(0)); window.location.hash = 'top'; >); 

Tried this today and didn’t work in FF16. Using pure JS, seen lower on this page, instead: document.body.scrollTop = document.documentElement.scrollTop = 0;

The above code will work properly in Modern browsers like FF,Chrome but it will not work in IE8 and below try to add both ‘html’,’body’ as the modern browsers will scroll based on body but IE8 and below will only scroll with ‘html’,’body’

Wow, I’m 9 years late to this question. Here you go:

Add this code to your onload.

// This prevents the page from scrolling down to where it was previously. if ('scrollRestoration' in history) < history.scrollRestoration = 'manual'; >// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support. window.scrollTo(0,0); 

To run it on window load just put it wrap it like this (assumes you have JQuery referenced)

history.scrollRestoration Browser support:

Chrome: supported (since 46)

Firefox: supported (since 46)

IE: not supported

For IE if you want to re-scroll to the top AFTER it autoscrolls down then this worked for me:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode; if(isIE11) < setTimeout(function()< window.scrollTo(0, 0); >, 300); // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top. > 

Thanks @RayLoveless — unfortunately this isn’t supported by MS browsers (because of course). See caniuse.com/#feat=mdn-api_history_scrollrestoration and developer.mozilla.org/de/docs/Web/API/…

Going to top of the page with a scroll effect is a bit more easier in javascript now with:

There are 2 ways to use scroll API .

This is the method I recommend. Using an option object:

This is a better option since you can define a behavior prop which applies a built-in easing animation.

The other method is to use an x and y coordinates.

x-coord — is the pixel along the horizontal axis of the document that you want displayed in the upper left.

y-coord — is the pixel along the vertical axis of the document that you want displayed in the upper left.

OLD ANSWER DO NOT USE

This is our vanilla javascript implementation. It has a simple easing effect so that the user doesn’t get shocked after clicking the To Top button.

Its very small and gets even smaller when minified. Devs looking for an alternative to the jquery method but want the same results can try this.

document.querySelector("#to-top").addEventListener("click", function() < var toTopInterval = setInterval(function()< var supportedScrollTop = document.body.scrollTop >0 ? document.body : document.documentElement; if (supportedScrollTop.scrollTop > 0) < supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50; >if (supportedScrollTop.scrollTop < 1) < clearInterval(toTopInterval); >>, 10); >,false); 

Источник

Вертикальный скроллинг страницы средствами jQuery и кроссбраузерность

Далее представлена кроссбраузерная реализация скроллинга страницы средствами jQuery.

Как всё начиналось

В последнее время на многих сайтах можно увидеть в той или иной вариации кнопки для прокручивания страницы вверх или вниз. Смотрится это довольно мило, удобно в использовании, и просто в реализации. Столкнувшись с проблемой прокрутки объёмного контента в очередном разрабатываемом проекте, решил реализовать подобную функциональность.
Задача была следующая: сделать две кнопки. По нажатию на одну осуществлять прокрутку страницы в самое начало, по нажатию на другую – в самый конец. Также было решено дополнительно реализовать возможности чисто визуального характера, типа анимации, исчезновения кнопок и прочее, здесь я останавливаться на этом не буду, так как тема это – кросбраузерность. Собственно это стало основной проблемой в процессе написания кода.
Нарисовав симпатичные кнопочки, прикрутив анимацию и исчезновение кнопок, и реализовав собственно саму прокрутку, я обнаружил, что в разных браузерах наблюдаются проблемы со скроллингом. Раздосадованный (и почему-то ни капли не удивленный…) этим фактом (а также тем, что не получится уйти с работы пораньше), я решил ознакомиться с аналогичными реализациями в Интернете. Просмотрев несколько примеров, точно также, не воспринимающих какой-либо браузер, а подчас и работающих только в одном определённом, было решено заняться прототипированием, экспериментированием, решением задачи методом тыка (нужное подчеркнуть).
Далее я приведу кроссбраузерный вариант реализации простенького скроллинга страницы вверх/вниз, с пояснениями, где и что может пойти не так и в каком браузере (ни в коем случае не претендую на оригинальность решения, это просто желание поделиться собственным опытом, и сэкономить людям время при решении аналогичных задач). Ах да, забыл оговориться, подавляющая часть кода написана на jQuery.

Подготавливаем основу

Итак, что мы будем делать. Будем делать две кнопки «вверх» и «вниз», по нажатию на которые осуществляется плавный скроллинг страницы в самое начало и в самый конец, соответственно. При этом реализация должна одинаково работать во всех современных браузерах.
Задача ясна, приступим к реализации. Для начала, напишем самое простое, а именно HTML код кнопок и соответствующие им CSS стили.

#up
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:20px;
background-color:#000000;
border-radius:30px;
>
#down
width:60px;
height:60px;
position:fixed;
bottom:50px;
left:90px;
background-color:#000000;
border-radius:30px;
>
.pPageScroll
color:#FFFFFF;
font:bold 12pt ‘Comic Sans MS’;
text-align:center;
>

В итоге мы имеем два круга с надписями «Вверх» и «Вниз» в левом нижнем углу браузера.

Проблемы начинаются

Теперь начинается самое интересное – JavaScript, а точнее jQuery. Как известно, для организации скроллинга выполняются манипуляции над свойствами scrollTop и scrollLeft. В jQuery эти манипуляции осуществляются при помощи методов .scrollTop() и .scrollLeft() соответственно. Нас интересует только .scrollTop.
Первый, самый простой вариант скроллинга выглядел следующим образом:

//Обработка нажатия на кнопку «Вверх»
$(«#up»).click(function() //Необходимо прокрутить в начало страницы
$(«body»).animate(,»slow»);
>);

//Обработка нажатия на кнопку «Вниз»
$(«#down»).click(function() //Необходимо прокрутить в конец страницы
var height=$(«body»).height();
$(«body»).animate(,”slow”);
>);

Всё, ну очень просто и незатейливо. Но, вот незадача, если в Chrom’е всё было довольно безоблачно и симпатично, в Oper’е тоже довольно сносно (прокрутка вверх осуществлялась мгновенно), то «ВредныйЛис» скролиться отказывался напрочь. Не долго думая, заменив в строчке: $(«body»).animate «body» на «html», я изменил ситуации кардинально: FireFox заработал, Opera перестал рывком прокручивать вверх и стал делать это плавно, но теперь уже Chrome перестал реагировать на манипуляции с кнопками. Из приведённых выше мытарств последовал следующий вариант перевариваемый всеми браузерами: $(«html,body»).animate… Других приемлемых способов осуществлять скроллинг, работающих во всех браузерах найдено не было.

Добавим рюшечек и бантиков

С самой простой частью разобрались. Базовый функционал получен, теперь можно придумать, что-нибудь поинтереснее. Первое же, что бросается в глаза, так это скорость скроллинга. При наличии сколь бы то ни было насыщенного контента, использование скроллинга становится настоящим тестом на склонность к эпилепсии. Поэтому, хочется, чтобы скроллинг был более плавным. Решение в лоб, задать определённую константу времени за которое должен осуществляться скроллинг. Очевидный плюс: элементарность решения. Не менее очевидный минус: никак не учитывается объём контента. Разумное решение: вычислять время выполнения скроллинга в зависимости от размера контента. Приступим.
В код обоих кнопок нужно дописать, вычисление текущей позиции. Для этого как раз и используется jQuery() метод .scrollTop().
Здесь, появляются уже известные проблемы: $(«body»).scrollTop() работает только в Chrome, $(«html»).scrollTop() не работает в Chrome. Что, вообще говоря, удивляет, так как получается, что конструкцией $(«body»).animate(,”slow”) в Opera мы можем скролить body, а при получении, свойство scrollTop тега body равно нулю, что, судя из описания element. scrollTop справедливо для элементов, которые скролить нельзя.
Вариант $(«body,html»).scrollTop() по понятным причинам нам не подходит. Ищем альтернативы. Оказывается, текущую позицию можно получить из объектов window и document, так чтобы это устраивало все браузеры. Думаю, следует упомянуть, что использование их для анимации (например вот так: $(document).animate.), ни к чему хорошему не приводит.
Итак, за рабочий вариант выяснения текущей позиции примем: $(document).scrollTop();
Теперь задумаемся над тем, как мы будем вычислять время. Вообще говоря решение тривиальное и известно каждому: время = путь/скорость. Для определения пути, нам как раз и нужна текущая позиция. Также, нужны координаты точки назначения. С кнопкой «Вверх» всё просто, координата точки назначения по вертикальной оси равна нулю, значит, путь равен текущему положению. Для кнопки «Вниз» всё немного сложнее, нам нужно получить «высоту» документа. Уже предвкушаем проблемы, да? Но нет, тут всё оказывается очень просто. Вполне подходящую высоту можно получить используя в качестве селектора «body», «html» или document.
Так. У нас есть путь, теперь нужна скорость. Здесь уже всё зависит лично от вас. Путём визуальных прикидок, мне показалась комфортной скорость 1.73 (цифра не имеет под собой никакого, сколь бы то ни было серьёзного обоснования и прикидывалась на глаз).

Итоговый вариант

Таким образом, рабочий код выглядит следующим образом:

$(document).ready(function() //Обработка нажатия на кнопку «Вверх»
$(«#up»).click(function() //Необходимо прокрутить в начало страницы
var curPos=$(document).scrollTop();
var scrollTime=curPos/1.73;
$(«body,html»).animate(,scrollTime);
>);

//Обработка нажатия на кнопку «Вниз»
$(«#down»).click(function() //Необходимо прокрутить в конец страницы
var curPos=$(document).scrollTop();
var height=$(«body»).height();
var scrollTime=(height-curPos)/1.73;
$(«body,html»).animate(,scrollTime);
>);
>);

Дополнительно, можно навешать коэффициенты, на которые бы помножалось время или скорость в зависимости от пути для обеспечения больше гибкости, но на этом я уже не буду останавливаться.

Резюме

В итоге мы получили очень простую реализацию скроллинга страницы, которая работает в любом современном браузере.
Испытания проводились для DOCTYPE: XHTML 1.0 Strict в браузерах Chrome 10, Opera 10, Opera 11, Firefox 4, Internet Explorer 8, Internet Explorer 9.

Некоторые проблемы:

• border-radius как известно в IE8 не работает, но кроссбраузерность вёрстки это не тема данного топика.
• В Opera 10 инструкция: $(«body,html»).animate(,scrollTime); приводит к моментальному переходу в начало страницы. Эта проблема исчезает с переходом на Opera 11.

UPD: Поправлен итоговый пример.

Источник