1

次の単純化された問題があるとします。

foreach i in 1..100 do
    <div onclick="$("div").attr('class','expand');">block i</div>

そしてこのCSS：

div {
    height: 20px;
    transition: height 0.5s;
}

div.expand {
    height: 50px;
}

divをクリックすると、すべてのdivがクラス「展開」を取得します。これは、ページが拡大されることを意味します。ただし、すべてが下にスクロールします。つまり、div 50 をクリックすると、おそらくウィンドウに表示されなくなり、もう一度表示するには下にスクロールする必要があります。

クリックした div を画面の中央に配置したいと思います。これは CSS で可能ですか、それとも JS が必要ですか?

4

2 に答える 2

0

この関数は、マウスクリックの位置に従ってページをスクロールします。

$(document).ready(function(){
    $('div').click(function(e){
        var offsetY = e.pageY -  $(window).scrollTop();
        $('div').attr('class','expand');
        $(window).scrollTop($(this).offset().top-offsetY);
    });
});

jsFiddle の例

于 2012-07-06T14:36:34.520 に答える
0

それは可能です...次の.scrollTop()ようにjQueryのメソッドを使用できます：

$(window).scrollTop( $('.your_element').offset().top + $('.your_element').height() - $(window).height() );
于 2012-07-06T11:59:18.120 に答える