JavaScriptでページの先頭にスクロールするには?スクロールバーが瞬時に一番上にジャンプしても望ましいです。スムーズなスクロールを求めているわけではありません。
スムーズなアニメーションでより良い解決策
// 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
これらの提案はどれも様々な場面で効果を発揮します。 検索でこのページを見つけた人は、[this][1]を試してみるのもいいかもしれません。 JQuery、プラグインなし、要素までスクロール。
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
[1]: http://www.abeautifulsite.net/blog/2010/01/smoothly-scroll-to-an-element-without-a-jquery-plugin/
スムーススクロール、純粋なjavascript。
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll);
window.scrollTo (0,currentScroll - (currentScroll/5));
}
})();
スムーズなスクロールをしたい方はこちらをお試しください。
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
もう一つの解決策は、JavaScriptのwindow.scrollToメソッドです。
window.scrollTo(x-value, y-value);
パラメータ .
本当に奇妙な。 この質問は5年前から有効なのに、スクロールをアニメーションさせるためのバニラ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
[1]:
window.scrollTo(0, 0);`は非常に速いです。 Mark Ursinoの例を試してみたが、Chromeでは何も起こらない<br>. で、次のようなことがわかりました。
$('.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つのブラウザでテストしてみました。 i'm using blueprint css<br>. これは、クライアントが"Book now".ボタンをクリックしたときです。 ボタンをクリックし、レンタル期間が選択されていない場合、ゆっくりとカレンダーのある上部に移動し、2つの<input>.フィールドを指すダイアログdivを開きます。 フィールドを指しているダイアログdivを開き、3秒後にフェード
多くの](https://stackoverflow.com/a/1145297/1015595) の ユーザーは、クロスブラウザ対応のためにhtmlタグとbodyタグの両方を選択することを推奨しています。
$('html, body').animate({ scrollTop: 0 }, callback);
コールバックが一度しか実行されないと思っていた場合には、これは問題になることがあります。 2つの要素を選択しているため、実際には2回実行されます。
これが問題になる場合は、次のようにしてください。
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();
}
<! -- スニペットを開始します。 js hide. false console. true babel. false -->.
$(".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>
<! -- end snippet -->.