Как перейти наверх страницы браузера

186

Я пишу модальное всплывающее окно, и мне нужно, чтобы браузер переходил в верхнюю часть экрана при нажатии кнопки открытия модального окна. Есть ли способ прокрутить браузер вверх с помощью jQuery?

— Exitos
источник

410

Вы можете установить scrollTop, например:

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

Или, если вам нужна небольшая анимация вместо привязки к началу:

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

— Ник Крейвер
источник

1

хороший ... Я использовал плагин scrollTo для jQuery раньше, чтобы выполнить это - мог бы сохранить немного кода с вашим кодом ... спасибо за урок ;-)

— Zathrus Writer

@MikhailBatcer - отключите CSS и посмотрите, работает ли он. Вы можете иметь проблемы с тем, как вы стиль ваших htmlи bodyтеги. в противном случае используйте $(window)вместо этого.

— invot 03

как добавить продолжительность анимации-скроллинга?

— Максим Струтинский

141

Без анимации можно использовать простой JS:

scroll(0,0)

С анимацией проверьте ответ Ника .

— Ионуй Стайку
источник

4

Это поддерживается во всех браузерах?

— Pacerier

1

scrollвходит в стандарт CSSOM, тогда как scrollToизначально был определен на уровне DOM 0 и не является частью какого-либо стандарта. Однако CSSOM включает в себя scrollToдля обратной совместимости.

— Клинт Пахл

3

Думаю, scrollпользуется широкой поддержкой. См stackoverflow.com/q/1925671/41906

— Клинт Pachl

Спасибо. Я думаю, window && window.scroll(0,0);это приемлемо в моей модели представления.

— nrodic

35

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

var scrollTop = function() {
    window.scrollTo(0, 0);
};

должен сделать свое дело.

— Шелкстер
источник

13

Вы могли бы сделать это без javascript и просто использовать теги привязки? Тогда он будет доступен этим js бесплатно.

хотя, поскольку вы используете модальные окна, я предполагаю, что вас не волнует, что вы свободны от js. ;)

— С.Кирс
источник

3

Использование якорных тегов приведет к прерыванию навигации по хешам.

— Tom Landau

2

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Развернуть фрагмент

— Варуна Манджула
источник

2

Я знаю, что это старый, но для тех, у кого проблемы в Edge:

Обычный JS: window.scrollTop=0;

К сожалению, scroll()и scrollTo()выкидывают ошибки в Edge.

— Джош Паулисон
источник

1

вы используете диалоговое окно пользовательского интерфейса jQuery, вы можете просто настроить модальное окно так, чтобы оно отображалось с фиксированной позицией в окне, чтобы оно не выскакивало из поля зрения, что исключает необходимость прокрутки. Другие

— Гэри
источник

0

Решение на чистом Javascript

theId.onclick = () => window.scrollTo({top: 0})

Если хотите плавную прокрутку

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— Могхази
источник