Як прокрутити верхню частину сторінки за допомогою JavaScript / jQuery?

Чи є спосіб контролю прокрутки браузера за допомогою JavaScript / jQuery?

Коли я прокручую свою сторінку наполовину вниз, а потім запускаю перезавантаження, я хочу, щоб сторінка перейшла до вершини, але натомість вона намагається знайти останню позицію прокрутки. Тому я зробив це:

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

Але не пощастило.

Редагувати :

Тож обидві ваші відповіді спрацювали, коли я дзвоню їм після завантаження сторінки-Дякую. Однак, якщо я просто оновлюю сторінку, виглядає так, що браузер обчислює та прокручує його до старого положення прокрутки ПІСЛЯ .readyподії (я також перевіряв функцію перевантаження тіла ()).

Отже, подальша робота полягає в тому, чи є спосіб запобігти прокрутці браузера до його попередньої позиції або повторно прокрутити до верху ПІСЛЯ, якщо це зробить?

Нічого собі, я запізнююся на це 9 років. Ось вам:

Додайте цей код до завантаження.

// 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);

Підтримка браузера history.scrollRestoration:

Chrome: підтримується (з 46)

Firefox: підтримується (з 46)

IE / Edge: не підтримується (все ж ..)

Opera: підтримується (з 33)

Сафарі: підтримується

Для IE / Edge, якщо ви хочете повторно прокрутити до верху ПІСЛЯ, коли він автоматично прокручується вниз, тоді це працювало для мене:

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    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.
} 

Крос-браузер, чисте рішення JavaScript:

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

Ви майже отримали це - вам потрібно встановити scrollTopна body, а НЕ window:

$(function() {
   $('body').scrollTop(0);
});

Редагувати:

Можливо, ви можете додати чистий якір у верхню частину сторінки:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

Чи є спосіб запобігти прокрутці веб-переглядача до його попереднього положення або повторно прокрутити до вершини ПІСЛЯ, коли це зробить?

Наступне рішення jquery працює для мене:

$(window).unload(function() {
    $('body').scrollTop(0);
});

Ось чиста версія анімованої версії прокрутки JavaScript для no-jQuery'ers: D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

І потім:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

ОНОВЛЕННЯ

Перейти до верхньої частини сторінки з ефектом прокрутки в JavaScript тепер трохи простіше:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

ОБЕРЕЖНО

Ми використовували це в наших останніх проектах, але я просто перевірив mozilla doc зараз, оновлюючи свою відповідь, і я вважаю, що вона була оновлена. Зараз цей метод window.scroll(x-coord, y-coord)і не згадує або показати приклади , які використовують objectпараметр , де ви можете встановити behaviorв smooth. Я просто спробував код, і він все ще працює в chrome та firefox, а параметр об'єкта все ще знаходиться в специфікації .

Тому використовуйте це з обережністю, або ви можете використовувати цей Polyfill . Крім прокрутки у верхній частині, це polyfill також обробляє інші методи: window.scrollBy, element.scrollIntoViewі т.д.

СТАРИЙ ВІДПОВІДЬ

Це наша javascriptреалізація ванілі . Він має простий ефект ослаблення, щоб користувач не був приголомшений після натискання кнопки « Наверх ».

Він дуже маленький і стає ще меншим, коли мінімізується. Розробники, які шукають альтернативу методу jquery, але хочуть однакових результатів, можуть спробувати це.

JS

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);

HTML

<button id="to-top">To Top</button>

Ура!

Це працює для мене:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

Використовує короткий setTimeoutвсередині, onloadщоб дати браузеру можливість прокрутити.

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

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

Використовуйте наступну функцію

window.scrollTo(xpos, ypos)

Тут обов'язковий xpos. Координату для прокручування до осі x (горизонтальної) у пікселях

Потрібен також ypos. Координату для прокрутки до осі y (вертикальної) у пікселях

$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

Використовуй це

Наступний код працює у Firefox, Chrome та Safari , але мені не вдалося перевірити це в Internet Explorer. Чи може хтось перевірити його, а потім відредагувати мою відповідь або прокоментувати її?

$(document).scrollTop(0);

Моє чисте (анімоване) рішення Javascript:

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

Пояснення:

window.scrollY - це змінна, що підтримується браузером кількості пікселів зверху, по якій прокручується вікно.

window.scrollTo(x,y) - це функція, яка прокручує вікно на певну кількість пікселів на осі x та на осі y.

Таким чином, window.scrollTo(0,window.scrollY-20)переміщує сторінку на 20 пікселів вгору.

setTimeoutЗнову викликає функцію в протягом 10 мілісекунд , так що ми можемо перемістити його ще 20 пікселів (анімовані), і ifперевіряє заяву , якщо ми по- , як і раніше необхідні свиті.

Чому б ви просто не використали якийсь довідковий елемент на самому початку свого html-файлу, наприклад

<div id="top"></div>

а потім, коли сторінка завантажується, просто робіть

$(document).ready(function(){

    top.location.href = '#top';

});

Якщо браузер прокручується після запуску цієї функції, ви просто зробите це

$(window).load(function(){

    top.location.href = '#top';

});

Перехресний перегляд браузера вгору:

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        } 

Перехресний переглядач перейдіть до елемента з id = div_id:

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        } 

Щоб відповісти на ваше відредаговане питання, ви можете зареєструвати onscrollобробник так:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

Це зробить так, що перша спроба прокрутки (яка, ймовірно, автоматична, зроблена браузером) буде ефективно скасована.

Якщо ви перебуваєте в режимі диваків (дякую @Niet the Dark Absol):

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

Якщо ви перебуваєте в суворому режимі:

document.documentElement.scrollTop = 0;

Тут не потрібно jQuery.

Це працює:

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

У моєму випадку організм не працював:

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

Але HTML працював:

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

Поєднання цих двох допомогло мені. Жодна з інших відповідей мені не допомогла, оскільки я мав сиденів, які не прокручували.

 setTimeout(function () {
        window.scroll({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });

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

}, 15);

var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>

без анімації, просто scroll(0, 0)(ванільний JS)

Якщо хтось використовує кутовий та матеріальний дизайн із сиденами. Це надішле вас на початок сторінки:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

Seeint хеш повинен зробити роботу. Якщо у вас є заголовок, ви можете використовувати

window.location.href = "#headerid";

інакше # поодинці буде працювати

window.location.href = "#";

І як це буде записано в URL, воно залишиться, якщо ви оновите.

Насправді вам не потрібен JavaScript для цього, якщо ви хочете зробити це на події onclick, вам слід просто поставити посилання навколо вашого елемента та надати його # як href.

Спочатку додайте порожній тег прив’язки до місця, куди ви хочете піти

<a href="#topAnchor"></a> 

Тепер додайте функцію в розділ заголовка

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

нарешті додайте подію завантаження до тегу body

<body onload="GoToTop()">

Універсальна версія, яка працює для будь-якого значення X і Y, і така сама, як window.scrollTo api, просто з додаванням scrollDuration.

* Загальна версія, що відповідає window.scrollДля браузера api **

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}

Я пам'ятаю, як бачив це десь деінде (я не міг знайти де), але це працює дуже добре:

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

Це дивно, але спосіб його роботи заснований на тому, як працює чека стека JavaScript. Повне пояснення знайдено тут, у розділі Нульові затримки.

Основна ідея полягає в тому, що час для setTimeoutнасправді не визначає встановлену кількість часу, яке він буде чекати, а мінімальний проміжок часу, який він буде чекати. Отже, коли ви скажете йому чекати 0 мс, браузер запускає всі інші процеси в черзі (наприклад, прокручування вікна до місця, де ви були останнім часом), а потім виконує зворотний виклик.

 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>