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

Ответ 1

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

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

Ответ 2

Вы получили почти - вам нужно установить scrollTop на body, а не window:

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

EDIT:

Возможно, вы можете добавить пустой якорь в начало страницы:

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

Ответ 3

Есть ли способ ПРЕДОТВРАТИТЬ браузер прокрутки до своего прошлого положения или перемотка назад вверх вещь?

Для меня работает следующее jquery-решение:

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

Ответ 4

Здесь представлена ​​чистая версия анимированного JavaScript для без-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>

Ответ 5

UPDATE

Перейти к началу страницы с эффектом прокрутки теперь немного проще в 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. Помимо прокрутки вверх, этот полифилл также обрабатывает другие методы: 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>

Ура!

Ответ 6

Это работает для меня:

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

Использует короткий setTimeout внутри onload, чтобы дать браузеру возможность прокрутки.

Ответ 7

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

jQuery(window).load(function(){

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

});

Ответ 8

Используйте следующую функцию

window.scrollTo(xpos, ypos)

Здесь требуется xpos. Координата для прокрутки по оси х (по горизонтали) в пикселях

ypos также требуется. Координата для прокрутки по оси Y (по вертикали) в пикселях

Ответ 9

$(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 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);
        }
    );
 });

Используйте это

Ответ 10

Следующий код работает в Firefox, Chrome и Safari, но я не смог проверить это в Internet Explorer. Может кто-нибудь проверить его, а затем отредактировать мой ответ или прокомментировать его?

$(document).scrollTop(0);

Ответ 11

Мое чистое (анимированное) решение 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 проверяет, нужно ли еще прокручивать.

Ответ 12

Почему бы вам просто не использовать некоторый ссылочный элемент в самом начале вашего html файла, например

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

а затем, когда страница загружается, просто выполните

$(document).ready(function(){

    top.location.href = '#top';

});

Если браузер прокручивается после срабатывания этой функции, вы просто выполняете

$(window).load(function(){

    top.location.href = '#top';

});

Ответ 13

В моем случае тело не сработало:

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

Но HTML работал:

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

Ответ 14

Перекрестный браузер переместится вверх:

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

Ответ 15

Чтобы ответить на ваш отредактированный вопрос, вы можете зарегистрировать обработчик onscroll следующим образом:

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

Это сделает так, что первая попытка прокрутки (которая, скорее всего, автоматическая, выполняемая браузером) будет эффективно отменена.

Ответ 16

Если вы находитесь в режиме quircks (спасибо @Niet the Dark Absol):

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

Если вы находитесь в строгом режиме:

document.documentElement.scrollTop = 0;

Здесь нет необходимости в jQuery.

Ответ 17

Это работает:

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

Ответ 18

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

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

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

}, 15);

Ответ 19

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

Ответ 20

без анимации, просто scroll(0, 0) (vanilla JS)

Ответ 21

Если кто-то использует angular и материальный дизайн с помощью 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;
    });

Ответ 22

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

window.location.href = "#headerid";

иначе, только один # будет работать

window.location.href = "#";

И поскольку он будет записан в URL-адрес, он будет оставаться, если вы обновите.

На самом деле, для этого вам не нужен JavaScript для событий, если вы хотите сделать это в событии onclick, вы должны просто поместить ссылку arround на ваш элемент и дать ему # как href.

Ответ 23

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

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

Теперь добавьте функцию в заголовок

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

наконец, добавьте событие onload в тег body

<body onload="GoToTop()">

Ответ 24

Общая версия, которая работает для любых значений X и Y, и такая же, как и window.scrollTo api, только с добавлением scrollDuration.

* Общая версия, соответствующая браузеру window.scrollTo 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();
}

Ответ 25

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