web-dev-qa-db-ja.com

ビューポートの中心までスクロールします

divをクリックして中央に配置したいと思います。したがって、divをクリックしている場合は、ブラウザのビューポートの中央までスクロールします。私が見たガイドや例のようなアンカーポイントは使いたくありません。どうすればこれを達成できますか？

javascriptjqueryscrollcenterscrollto
12
Designon

何らかの方法で、クリック可能な要素を特定する必要があります。そのためにclass-属性を使用する例を作成します。

ステップ1

これは、作業を行うスクリプトです。

$('html,body').animate({
    scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2
}, 200);

あなたが試したのは、コンテナをページの一番上までスクロールすることです。また、コンテナの高さとビューポートの高さの差を計算して差し引く必要があります。これを2で割ります（上下に同じスペースを作りたいので、準備ができています。

ステップ2

次に、クリックハンドラーをすべての要素に追加します。

$(document).ready(function () {
    $('.image').click( function() {
        $('html,body').animate({ scrollTop: $(this).offset().top - ( $(window).height() - $(this).outerHeight(true) ) / 2  }, 200);
    });
});

ステップ3

HTML/CSSを設定します。

<style>

    div.image {

        border:     1px solid red;
        height:     500px;
        width:      500px;
    }

</style>

<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>

これで完了です。

デモをチェックしてください

自分で試してみてください http://jsfiddle.net/insertusernamehere/3T9Py/

23
insertusernamehere

提供するわずかな変更が1つあります。 「調整係数」（つまり、（$（window）.height（）-$（this）.outerHeight（true））/ 2）が0未満の場合、望ましくない結果が得られ、ビューポートのその要素をスクロールでオーバーシュートする可能性があります。修正するためにmax（0、adjustment factor）を追加しました：

function scrollIntoView(el) {

    var offsetTop = $j(el).offset().top;
    var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
    var scrollTop = offsetTop - adjustment;

    $j('html,body').animate({
        scrollTop: scrollTop
    }, 200);
}
3
herringtown
HTMLElement.prototype.scrollToCenter = function(){
    window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}

垂直方向に中央にスクロールするための純粋なJavaScriptで実現。そして、それは水平方向でも同様です。要素の高さは画面の高さよりも大きい可能性があるため、考慮していません。

2
Ciar