Как прокрутить страницу к верху с помощью JavaScript? Желательно даже если полоса прокрутки мгновенно перескакивает на верх. Я'не ищу плавной прокрутки.
Если вам не нужно, чтобы изменения анимировались, то вам не нужно использовать специальные плагины - я бы просто использовал родной метод JavaScript window.scrollTo - передача значения 0,0 мгновенно прокрутит страницу в левый верхний угол.
window.scrollTo(x-coord, y-coord);
Параметры
Если вам нужна плавная прокрутка, попробуйте сделать что-то вроде этого:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Это возьмет любой тег <a>
, чей href="#top"
, и сделает его плавную прокрутку к вершине.
Попробуйте прокрутить сверху
<script>
$(document).ready(function(){
$(window).scrollTop(0);
});
</script>
Лучшее решение с плавной анимацией:
// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });
Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
Все эти предложения отлично работают для различных ситуаций. Для тех, кто нашел эту страницу через поиск, можно дать это попробовать. В jQuery, не плагин, выделите элемент.
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
плавная прокрутка, чистом JavaScript:
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>
в HTML
<a href="#top">go top</a>
Если вы хотите сделать плавный скроллинг, пожалуйста, попробуйте это:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Другим решением является окно JavaScript.метод scrollTo :
window.scrollTo(x-value, y-value);
Параметры :
Действительно странно: этот вопрос сейчас действует уже пять лет и до сих пор нет ответа ванили на JavaScript для анимации прокрутки... так что здесь вы идете:
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)
Если вы хотите, вы можете обернуть это в функцию и вызов, что через атрибут onclick`. Проверить это [jsfiddle][1]
Примечание: это очень простое решение и, возможно, не самая лучшая одна. Очень проработанный пример может быть найден здесь: https://github.com/cferdinandi/smooth-scroll
С помощью окна.scrollTo(0, 0); очень быстро<БР> так что я попытался на примере Марка Урсино, но в Хроме ничего не происходит<БР> и я нашел это
$('.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<БР> это когда клиент нажимает на "Книгу сейчас" кнопка и'т иметь срок аренды установлен, медленно движется к вершине, где календари и открывает диалоговое див указывая на 2 <вход> поля, через 3 сек исчезает
В много о пользователи рекомендуется использовать как теги 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 и#39;).scrollTop (возвращает)
0, но не в других браузерах, таких как Firefox.
Если вы Don'т хотите ждать анимации для завершения в случае, если полоса прокрутки уже на вершине, попробуйте это:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
if ($('body').scrollTop()) {
$('body').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}
<script>
$(function(){
var scroll_pos=(0);
$('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>
Редактировать:
$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
Старый а
может сделать трюк
document.location.href = "#top";
Отлично работает в FF, IE и Chrome
$(документ).scrollTop(0);
тоже работает.
в
$(".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>
в
Это будет работать:
окна.scrollTo(0, 0);