it-swarm.com.ru

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

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

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

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

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

ПРАВКА:

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

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

137
Yarin

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

document.body.scrollTop = document.documentElement.scrollTop = 0;
278
Niet the Dark Absol

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

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

Правка:

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

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

Есть ли способ ПРЕДОТВРАТИТЬ браузер прокручивая к своей прошлой позиции, или к Перепрокрутите вверх, ПОСЛЕ ТОГО, КАК оно делает вещь?

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

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

Вот чистая 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>
15
ulfryk

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

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

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

8
user113716

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

jQuery(window).load(function(){

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

});
7
Chanderkesh Kumar

ОБНОВЛЕНИЕ

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

Так что используйте это с осторожностью, или вы можете использовать это Polyfill . Помимо прокрутки вверх, этот полифилл также обрабатывает другие методы: window.scrollBy, element.scrollIntoView и т.д.


СТАРЫЙ ОТВЕТ

Это наша реализация Vanilla javascript. Он имеет простой эффект ослабления, так что пользователь не будет шокирован после нажатия кнопки To Top.

Он очень маленький и становится еще меньше при уменьшении. Разработчики, ищущие альтернативу методу 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>

Ура!

7
Jo E.

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

window.scrollTo(xpos, ypos)

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

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

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

Использовать этот

5
Ekin Ertaç

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

4
Toastrackenigma

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

$(document).scrollTop(0);
4
bigblind

Кросс-браузерная прокрутка вверх: 

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

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

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

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

$(document).ready(function(){

    top.location.href = '#top';

});

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

$(window).load(function(){

    top.location.href = '#top';

});
3
arik

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

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

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

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

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

document.documentElement.scrollTop = 0;

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

2
Zlatan

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

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

Но HTML работал:

$('html').scrollTop(0);
2
Sachin Prasad

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

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

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

2
Niet the Dark Absol
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;"/>
1
user3178603

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

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

1
maxbellec
 <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>
0
Kenrick Humber

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

window.location.href = "#headerid";

в противном случае, один # будет работать

window.location.href = "#";

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

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

0
xavierm02

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

<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()">
0
Satii

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

* Универсальная версия, соответствующая интерфейсу window.scroll для браузера **

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