39

スクロール中にアニメーション化しようとしていますが、コードがうまくいきません...

私はこのjqueryを持っています

$(window).scrollTop(200);

アニメーション効果を与えたい

これらを試しましたが、機能しませんでした：

1. $(window).animate({scrollTop:200},1000);
2. $('body').animate({scrollTop: 200}, 1000);

これを次のようなクリック関数に適用しました。

$('.goto').click(function(){
    $(window).scrollTop(485); // its working
});

そして今、アニメーションの効果を出したいのですが、うまくいきません...

4

6 に答える 6

69

scrollTop プロパティがないため、$('html,body')代わりに使用する必要があります。$(window)window

$('#scroll-bottom').on('click', function() {
  $('html, body').animate({
    scrollTop: 2000
  }, 2000); // for all browsers
  
  // $('html').animate({scrollTop: 2000}, 2000); // works in Firefox and Chrome
  // $('body').animate({scrollTop: 2000}, 2000); // works in Safari
})
#top {
  margin-bottom: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="top">
  <button id="scroll-bottom">scroll</button>
</div>
<div>bottom</div>

于 2013-09-13T07:27:17.053 に答える
49

html と body スタイルがある場合 height:100%; 使用していない

height: auto;
min-height: 100%;
于 2015-05-12T15:53:33.757 に答える
1

ピクセルを追加するだけです

$('body').animate({ scrollTop: "300px" }, 1000);
于 2013-09-13T06:38:21.740 に答える
0

デモ 

<html>
function scrollmetop(dest){
    var stop = $(dest).offset().top;
    var delay = 1000;
    $('body,html').animate({scrollTop: stop}, delay);
    return false;
}

scrollmetop('#test');
<body>
    <div style="margin: 100px 100px 1000px 100px">
       <div id="test" style="width: 100px; height: 100px; border: 3px solid black;">target object</div>
    </div>
</body>
</html>
于 2013-09-13T07:10:48.903 に答える
0

私はAngularを使用しており、ng-repeatで追加されたアイテムまでスクロールしようとしていました. このコードを a 内に配置しました$timeout(要素が表示された後に発生させるためだけに、ゼロ時間で)。これは、新しいアイテムにoffset().top...

...しかし、何十もの新しい要素を追加するのがあまりにも多すぎて、スクロールアニメーションを実行する処理能力がなかったと思います. タイムアウト時間を 1 秒に設定すると、うまくいきました (ただし、タイムアウトが呼び出されるまでに実際には 7 秒かかりました)。

ここでは、アニメーション化されたスムーズなスクロールは実際には扱いにくいと結論付けました。

document.body.scrollTop = entry.offset().top
于 2016-05-18T20:35:56.900 に答える