コンテンツに使用される内部DIVを持つHTMLページがあります。内部DIVには独自のスクロールバーがあります。私は自動的にDIVの特定の位置にスクロールしたいと思います。独自のスクロールバーでdivをプログラムでスクロールするにはどうすればよいですか?
どうすればいいですか? (ウィンドウのスクロールバーをスクロールし、私はオートにしたくないことに注意してください - 私はすでにこれを行う方法を知っている)、クロスプラットフォームソリューションを
コンテンツに使用される内部DIVを持つHTMLページがあります。内部DIVには独自のスクロールバーがあります。私は自動的にDIVの特定の位置にスクロールしたいと思います。独自のスクロールバーでdivをプログラムでスクロールするにはどうすればよいですか?
どうすればいいですか? (ウィンドウのスクロールバーをスクロールし、私はオートにしたくないことに注意してください - 私はすでにこれを行う方法を知っている)、クロスプラットフォームソリューションを
を必要とされている
divが設定した(とその仲間ができscrollTop
性質を持っています、scrollLeft
)。
あなたのdivをスクロールすることができ、この.scrollTo()
方法があります。
<div id="#scroll-here">Test..</div>
と、次のようにリンクを追加します:あなたはスムーズスクロールをしたい場合
<a href="#scroll-here">Scroll to Test</a>
(あなたがスクロールしたい)のdivを追加here
より多くの情報訪問のためにそれを試してみてくださいチェックが可能this
JavaScriptが受け入れられる限り、demo using jQueryを作成しました。01内にIDを持つ既知の要素が使用されています。
$(function() {
var testOffset = $('#test').offset(),
scrollOffset = $('#scroll').offset();
$('#scroll').scrollTop(testOffset.top - scrollOffset.top);
});
あなただけのどこまで、ピクセルの面ではなく、特定の要素にわかっている場合、それはに適合させることができる:
$(function() {
$('#scroll').scrollTop(100);
});
私はscrollTo jQuery pluginを見た推薦します。それはあなたが任意の要素内のスクロールをアニメーション化することを可能にする本当に便利なプラグインです。私はjsFiddleの小さな例をセットアップして、その動作を実証しています。この例では、最初のdiv
の3番目のp
をスクロールし、次に2番目のdiv
の2番目のp
をスクロールする方法を示します。注目すべき点の1つは、position().top
が正しいことを確認するには、div
を含むものをposition: relative;
に設定する必要があります。うまくいけば、これはあまりにも多くの問題ではない。 :)