4

最近、行き止まりになってしまいました。フッター (#footernotes) を展開しようとしていますが、それは機能します。基本的には本体の後ろの div (z-index で実行) であり、ボタンをクリックすると下に移動します。スクロール バーも一緒に表示されるため、ページが長くなります。

しかし、私がやろうとしているのは、展開された div でビューポートを移動させることです。ボタン (.secret) を押すと、div (#footernotes) が表示されますが、手動でスクロールして長いページを表示しない限り、まだビューポートから外れています。

ページを拡大した後、ビューポートを自動的に下にスクロールするにはどうすればよいでしょうか? つまり、ビューポートをページの下部にとどめるにはどうすればよいでしょうか。

これが私のコードです：

<script>
$(document).ready(function(){
    $('.secret').click(function(){
            $("#footernotes").animate({top: "100px"}, 1000);
        return false;
    });
});
</script>

<div id="footer">
    <a href="" class="secret" ><div id="buttontest" style="width:50px; height:50px; background-color:green;"></div></a>
    <div id="footernotes">
    </div>
</div> <!-- end #footer -->

そして #footernotes の CSS

#footernotes {
    background-color: red;
    width: 100%;
    position: relative;
    top: -80px;
    height: 150px;
    z-index: -400;
}

編集：質問を入力しているときに答えがわかりました。scrollTopを使用する必要があります。以下の例に行コードを追加しました。

<script>
    $(document).ready(function(){
        $('.secret').click(function(){
                $("#footernotes").animate({top: "100px"}, 1000);
                $('body,html').animate({scrollTop: "210px"},1000);
            return false;
        });
    });
    </script>

他の人が同じ質問をした場合に備えて、この質問を投稿したままにすると思いました。

4

2 に答える 2

10 
document.getElementById('divID').scrollIntoView();

それがうまくいくかどうか試してみてください。

于 2013-03-14T19:16:33.977 に答える
1

Jquery メソッド .focus() を使用して実行できます。追加するだけです

$(divname / .class / #id).focus();

そしてそれは行われるでしょう。

于 2013-03-14T21:36:41.207 に答える