Прокрутите страницу вверх, используя JavaScript / jQuery? - PullRequest
Новая
       128

Прокрутите страницу вверх, используя JavaScript / jQuery?

1440 голосов
/ 17 июля 2009

У меня на странице <button>, при нажатии этой кнопки скрытый <div> отображается с помощью jQuery.

Как мне прокрутить вверх страницу, используя команду JavaScript / jQuery в этой функции? Желательно, даже если полоса прокрутки мгновенно прыгает наверх. Я не ищу плавной прокрутки.

Ответы [ 37 ]

24 голосов
/ 01 сентября 2010

С window.scrollTo(0, 0); очень быстро
поэтому я попробовал пример Марка Урсино, но в Chrome ничего не происходит
и я нашел это 

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

протестировал все 3 браузера и все работает
Я использую план CSS
это когда клиент нажимает кнопку «Забронировать сейчас» и у него не выбран период аренды, медленно перемещается наверх, где находятся календари, и открывает диалоговое окно div, указывающее на 2 поля, через 3 секунды оно исчезает

22 голосов
/ 31 октября 2014

A lot из пользователи рекомендуют выбирать теги html и body для совместимости с различными браузерами, например: 

$('html, body').animate({ scrollTop: 0 }, callback);

Это может сбить вас с толку, хотя, если вы рассчитываете, что ваш обратный вызов выполняется только один раз. Фактически он будет запущен дважды, потому что вы выбрали два элемента.

Если это проблема для вас, вы можете сделать что-то вроде этого: 

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

Причина, по которой это работает, в Chrome $('html').scrollTop() возвращает 0, но не в других браузерах, таких как Firefox.

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

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}
20 голосов
/ 24 июля 2014 
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Edit: 

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
18 голосов
/ 01 декабря 2014

Старый #top может сделать трюк 

document.location.href = "#top";

Отлично работает в FF, IE и Chrome

14 голосов
/ 01 декабря 2011

Попробуйте это 

<script>
    $(window).scrollTop(100);
</script>
14 голосов
/ 01 августа 2012

$(document).scrollTop(0); тоже работает.

13 голосов
/ 30 января 2014

Решение без jQuery / чистый JavaScript: 

document.body.scrollTop = document.documentElement.scrollTop = 0;
13 голосов
/ 14 июля 2018 

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>
11 голосов
/ 19 апреля 2018

Это будет работать:

window.scrollTo(0, 0);

10 голосов
/ 08 августа 2017

Попробуйте этот код: 

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Элемент Dom, куда вы хотите переместить свиток.

time => миллисекунд, определите скорость прокрутки.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...