Как перейти к началу страницы с помощью JavaScript / jQuery?

Есть ли способ управления прокруткой браузера с помощью JavaScript / jQuery?

Когда я прокручиваю свою страницу на полпути вниз, а затем запускаю перезагрузку, я хочу, чтобы страница поднималась вверх, но вместо этого она пытается найти последнюю позицию прокрутки. Итак, я сделал это:

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

Но не повезло.

РЕДАКТИРОВАТЬ :

Так что оба ваших ответа сработали, когда я позвонил им после загрузки страницы. Спасибо. Тем не менее, если я просто обновлю страницу, похоже, что браузер вычисляет и прокручивает до своей прежней позиции прокрутки ПОСЛЕ .readyсобытия (я тоже проверял функцию body onload ()).

Итак, продолжение: есть ли способ ПРЕДОТВРАТИТЬ браузер, прокручивающий его в предыдущее положение, или повторно прокрутить вверх, ПОСЛЕ того, как он делает свое дело?

Вау, я на 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: не поддерживается (пока ..)

Опера: поддерживается (с 33)

Safari: поддерживается

Для 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 прямо сейчас, обновляя свой ответ, и я считаю, что он был обновлен. Прямо сейчас метод 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 (по горизонтали) в пикселях

Ипос также требуется. Координата для прокрутки по оси 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);

Сочетание этих двух помогло мне. Ни один из других ответов не помог мне, так как у меня был sidenav, который не прокручивался.

 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)

Если кто-то использует угловой и материальный дизайн с sidenav. Это отправит вас в верхнюю часть страницы:

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.scrollTo для браузера **

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>