javascript - ライトボックスの一番上までスクロールします

Question

カスタマイズしたメニューを作成しました。ここを参照してください。このリンクをクリックすると、アイテムの長いリストがあるシャドウボックスがポップアップ表示されます。ここで、メニューリストの一番上に戻る「トップに戻る」アンカーリンクが必要です。

Answer 1

#boxライトボックスにIDを設定しました。

HTML

<div id="box">
...
<!-- long content there -->
<a href="#" id="toTop">To Top</a>
</div>

CSS（要素の幅の設定）

#box {
    position:relative;
    width:200px;
    height:250px;
    overflow:auto;
}

#box #toTop {
    position:absolute;
    display:none;
    left:150px;
    top:10px;
}

jQuery

$('#box').bind('scroll', function(e) {
   if ($(this).scrollTop() > 100) {
        $('#toTop').fadeIn();
        $('#toTop').css({'top' : $(this).scrollTop() + 100});
   } else {
        $('#toTop').fadeOut();
    }
});

$(document).on('click', '#toTop', function(e) {
    e.preventDefault();
    //$('#box').scrollTop(0); //just go to top
    $('#box').animate({scrollTop : 0},'slow'); //animate
});

フィドル

Answer 2

以下を使用すると非常に簡単です。

document.querySelector("iframe").contentWindow.scrollTo(0,0);

次に、ページにボタンを配置し、クリック時にそれを呼び出します。ああ、height:100%iframe の本体を省略して、2 番目のスクロールバーを取り除くことができます。

上記の行を貼り付けて、Web ページを使用してブラウザーのコンソールで実行するだけで、これを試すことができます。