Ответ 1
Вы можете установить scrollTop
, например:
$('html,body').scrollTop(0);
Или, если вам нужна небольшая анимация, а не привязка к вершине:
$('html, body').animate({ scrollTop: 0 }, 'fast');
Я пишу модальное всплывающее окно, и мне нужно, чтобы браузер переходил в верхнюю часть экрана при нажатии открытой модальной кнопки. Есть ли способ прокрутить браузер вверху с помощью jQuery?
Вы можете установить scrollTop
, например:
$('html,body').scrollTop(0);
Или, если вам нужна небольшая анимация, а не привязка к вершине:
$('html, body').animate({ scrollTop: 0 }, 'fast');
Без анимации вы можете использовать обычный JS:
scroll(0,0)
С анимацией проверь ник ответа.
Если вы используете диалоговое окно jQuery UI, вы можете просто создать модальный вид с фиксированной в окне позицией, чтобы он не выходил из поля зрения, что отрицает необходимость прокрутки. В противном случае
var scrollTop = function() {
window.scrollTo(0, 0);
};
должен сделать трюк.
Вы можете сделать это без javascript и просто использовать метки привязки? Тогда он будет доступен для этих js бесплатно.
хотя, поскольку вы используете модальные, я полагаю, вы не заботитесь о том, чтобы быть свободным.;)
вы используете диалоговое окно JQuery UI, вы можете просто создать модальный вид с фиксированной в окне позицией, чтобы он не выходил из поля зрения, отрицая необходимость прокрутки. Другое
// 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>
Я знаю, что это старый, но для тех, у кого проблемы в Edge:
Обычный JS: window.scrollTop=0;
К сожалению, scroll()
и scrollTo()
выбрасывают ошибки в Edge.