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

Question

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

Answer 1

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

ステップ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/

Answer 2

HTMLElement.prototype.scrollToCenter = function(){
    window.scrollBy(0, this.getBoundingClientRect().top - (window.innerHeight>>1));
}

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

Answer 3

私はこの質問が古いことを知っています、しかし今、あなたはscrollIntoViewを使うことができます：

例えば：

document.body.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'center' });

Answer 4

提供するわずかな変更が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);
    }