3

scrollTop を現在のページの場所にアニメーション化するようにプログラムしようとしています。左側にいくつかのリンクがあり、右側にいくつかの div があるコンテンツを持つ固定メニューがあります。メニューのリンクをクリックすると、特定の div にアニメーション化する必要があります。

var boxes = $('#container .box');
var boxesLength = boxes.length;
var offsets = [];

for(var i = 0; i < boxesLength; i++) {
    offsets.push($('#praca_container .box:eq('+ i +')').offset().top);
} 

$('a').click(function() {
  var index = $('a').index(this);
  $("html, body").stop().animate({ scrollTop: offsets[index] - 50});
}

正しい場所にアニメーション化していますが、常に上から特定の場所に移動します。なぜそれは常に上からアニメーション化されるのですか?上から始めずに場所から場所へアニメーション化する効果を作成するのを手伝ってもらえますか?

また、「+=」で距離を計算してスクロールトップをアニメーション化しようとしましたが、前述と同じ効果が得られました。

4

2 に答える 2

0

クリック ハンドラー内では、デフォルトの動作を抑制する必要があります。これには、明らかにウィンドウの上部へのスクロールが含まれます。

$('a').click(function(event) {
  event.preventDefault();
  var index = $('a').index(this);
  $("html, body").stop().animate({ scrollTop: offsets[index] - 50});
});
于 2017-12-15T17:02:25.777 に答える
-1

offset().top の代わりに element.scrollTop を使用します。要素が画面上のみにある要素の最上部の位置ではなく、要素のスクロール位置が必要です (既に下にスクロールできるため)。

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollトップ

http://api.jquery.com/scrollTop/

var boxes = $('#container .box');
var boxesLength = boxes.length;
var offsets = [];

for(var i = 0; i < boxesLength; i++) {
    offsets.push($('#praca_container .box:eq('+ i +')').scrollTop()); //notice the change
} 

$('a').click(function() {
  var index = $('a').index(this);
  $("html, body").stop().animate({ scrollTop: offsets[index] - 50});
}
于 2013-05-27T22:37:23.050 に答える