web-dev-qa-db-ja.com

要素をスクロールして、スクロール可能なコンテナに表示します

ハードコードされた高さのスクロールコンテナーがあります。

.scrollingContainer {
    overflow: scroll;
    height: 400px;
}

このスクロールコンテナーには、アイテムのリストが含まれています。クリックしたアイテムがスクロールコンテナーの上部にあるように、コンテナーをスクロールしたいアイテムをクリックします。

$('.scrollingContainer li a').click( function(event) {
  var vpHeight = $('.scrollingContainer').height();
  var offset = $(this).offset();
  $('.scrollingContainer').animate({
    scrollTop: vpHeight - offset.top
  }, 500);
});

上記は私が現在持っているものですが、実行する必要がある数学的計算に問題があります。また、var offset値は正しくありません。スクロールコンテナ内の位置に基づいてオフセット値を取得したいと考えていたページの上部からオフセットを取得しているようです。

助けてくれてありがとう！

jqueryscrolltop
17
CLiown

この答え のバリエーションがトリックを行います：

var myContainer = $('.scrollingContainer')

$(myContainer).on('click', 'a', function () {
  var scrollTo = $(this);

  myContainer.animate({
    scrollTop: scrollTo.offset().top - myContainer.offset().top + myContainer.scrollTop()
  });
});

Fiddle demo

47
isherwood

これがライブの例です： http://jsfiddle.net/LqQGR/12/

ScrollTopを要素の位置（コンテナの上部とリンクの間の距離）plusに設定し、現在のscrollTop（ containedコンテンツの最上部と表示されている現在の場所。

また、scrollingContainerをposition: relativeに設定して、コンテンツの offset parent にする必要があります。

var $scrollingContainer = $('.scrollingContainer');

$scrollingContainer.on('click', 'a', function (event) {
    var scrollTop = $scrollingContainer.scrollTop();
    var link      = $(event.currentTarget);
    var position  = link.position();

    $scrollingContainer.animate({
        scrollTop: position.top + scrollTop
    }, 500);
});

ちなみに、私の答えは、クリックイベントリスナーをすべてのアンカータグに個別に追加するよりも優れています。これにより、パフォーマンスが向上するリスナーが1つだけ追加されます。 委任イベントの詳細を読む

3
Nate