Примушуйте позицію прокрутки сторінки до вершини на оновлення сторінки в HTML

129

Я будую веб-сайт, який публікую з divs. Коли я оновлюю сторінку після її прокрутки до позиції X, то її завантажують із позицією прокрутки як X.

Як я можу змусити оновити сторінку до вершини, щоб оновити сторінку?

Те , що я можу думати про яку - то JS або JQuery перспективи в якості onLoad()функції сторінки для SET сторінки прокрутки вгору. Але я не знаю, як я могла це зробити.
Кращим варіантом буде, якщо є якась властивість або щось, щоб сторінка була завантажена з позицією прокрутки за замовчуванням (тобто вгорі), яка буде на зразок завантаження сторінки замість оновлення сторінки .

— Місяць
джерело

Дивно, але жодне з рішень тут не працювало для мене, але це було: stackoverflow.com/a/11486546/470749

— Райан,

165

Ви можете зробити це за допомогою методу scrollTop у DOM готово :

$(document).ready(function(){
    $(this).scrollTop(0);
});

— Пат
джерело

9

Не працює на Safari. Але це -> stackoverflow.com/a/18633915/102133 робить.

— Бен,

165

Для простої простий реалізації JavaScript:

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}

Розгорніть фрагмент

— ProfNandaa
джерело

1

Це правильна відповідь. Рішення jQuery працює не у всіх випадках.

— Гаррі Стівенс

@ Paul12_ - Я щойно перевірив це, Safari 11.0.3і для мене добре працює, який ви використовуєте?

— ProfNandaa

Це для мене не вийшло. Мені довелося повернутися з функції onbeforeload, щоб змусити його працювати.

— Ікбал

@Iqbal - що ти зробив return?

— ProfNandaa

1

додавання document.querySelector('html').style.scrollBehavior = '';може бути також необхідним. Якщо це було встановлено smooth, воно може не дістатися до початку, перш ніж сторінка буде завантажена.

— кевнк

35

Відповідь тут не працює для сафарі, document.ready часто звільняється занадто рано.

Мені потрібно скористатись beforeunloadподією, яка заважає тобі щось робитиsetTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});

— Бен
джерело

1

Додати після функції прокрутки: $ ('html'). Text (''); , тому коляска буде скинута

— користувач956584

1

@Userpassword Ви не думаєте, що $ ("html"). Remove () буде краще?

— Бен

18

Знову найкраща відповідь:

window.onbeforeunload = function () {
    window.scrollTo(0,0);
};

(ось для не-jQuery, знайдіть, якщо ви шукаєте метод JQ)

EDIT: невелика помилка "onbeforunload" :) Chrome та інші браузери "запам'ятовують" останню позицію прокрутки перед завантаженням, тому якщо ви встановите значення 0,0 безпосередньо перед завантаженням вашої сторінки, вони запам’ятають 0,0 та виграли не повертаюсь туди, де була смуга прокрутки :)

— xoxel
джерело

@ Paul12_ Safari вимагає document.documentElement.scrollTopпрацювати. Я зазвичай використовую і те, і інше.

— Грем О'Мауні

9

Перевірте тут.scrollTop() функцію jQuery

Це виглядало б щось на кшталт

$(document).load().scrollTop(0);

— jon3laze
джерело

9

Ви також можете спробувати

$(document).ready(function(){
    $(window).scrollTop(0);
});

Якщо ви хочете прокрутити позицію x, ви можете змінити значення від 0 до x.

— Анкіт
джерело

7

Замість цього location.reload()просто використовуйте location.href = location.href. Він не прокручується до попереднього положення, як location.reload()це робиться.

Примітка. Це не буде перезавантажено, якщо в URL-адресі є #

— Науфаль
джерело

4

<script> location.hash = (location.hash) ? location.hash : " "; </script>

Помістіть вищезгаданий скрипт у <head>тег вашого HTML. Не впевнений, як поводяться програми на одній сторінці! Але впевнено працює як шарм на звичайних сторінках.

— суворі53
джерело

4

Відповідь тут (прокрутка $(document).ready) не працює, якщо на сторінці є відео. У такому випадку сторінка прокручується після закінчення цієї події, що перекриває нашу роботу.

Найкраща відповідь повинна бути:

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});

— DrPollit0
джерело

3

$(document).ready(function(){
    $(window).scrollTop(0);
});

не працював для мене, оскільки Google Chrome просто прокручував назад вниз після завантаження сторінки. Що я використовував

$(document).ready(function() {
    var url = window.location.href;
    console.log(url);
    if( url.indexOf('#') < 0 ) {
        window.location.replace(url + "#");
    } else {
        window.location.replace(url);
    }
});

// Це завантажує сторінку наприкінці. Так він завжди буде завантажуватися вгорі.

— Даут
джерело

3

Щоб скинути вікно, прокрутіть назад доверху, $(window).scrollTop(0) у події перед завантаженням виконуються хитрощі, однак я перевірив, що в Chrome 80 воно повернеться на старе місце після перезавантаження.

Щоб запобігти цьому, встановіть history.scrollRestorationдля "manual".

//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
      $(window).scrollTop(0);
});

— Алекс весело
джерело

Це найкраща відповідь для мене, працює на Chrome / Linux

— SNS - Web et Informatique

0

Суперкаліфрагістіческіспіадальна відповідь:

додайте це у верхній частині файлу js або тегу сценарію

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

— Нікобелі
джерело