私は簡単なことをしようとしています。私は大きな全幅のヘッダーを持つWebページを持っています。最初のマウスホイールスクロールの内容までスクロールする必要があります。jQuery - スムーズにコンテンツにスクロール
私はこのようなものがあります：それはほとんど正常に動作しますが、
$(window).scroll(function() {
$('html, body').animate({
scrollTop: ($('.site-content').first().offset().top)
},2000);
});
を - 最初に、それは短いスクロールダウン（オリジナルのスクロール）を行い、そのスクロールアニメーションが開始した後。だから、スムーズに見えません。
これをスムーズに行うにはどうすればよいでしょうか？
これはテストされていません。私は今
コンピュータではないんだけど
$(window).scroll(function(e) {
e.preventDefault()
$('html, body').animate({
scrollTop: ($('.site-content').first().offset().top)
},500);
});
を変更してみたが、これは、ユーザーがスクロール無効になりますことを心に留めておくと、あなたの関数のみ第1スクロールでフルcontroll
を持っているのだろうか？
var scrolled = false;
$(window).scroll(function(e) {
if (scrolled == false) {
$('html, body').animate({
scrollTop: ($('.site-content').first().offset().top)
}, 2000);
scrolled = true;
}
});div {
background-color: #000;
width: 100px;
height: 100px;
}
.site-content {
background-color: #F00;
}<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="site-content"></div>
</body>
だけでなく、それは本当に仕事ができるようにそれが見えたが、それはしていません。マウススクロールは引き続き有効です。 – Balu