[jQuery]ページの読み込み時に、特定のDIVにスクロールさせる方法

ページの読み込み時に、特定のDIVやアンカー(anchor)の位置にスクロールされるようにしなければならない状況があります。 そのような場合、単純なjQueryを簡単に特定の位置に移動されるようにすることができます。

ページの読み込み時に、特定のDIVにスクロールさせる方法(jQuery)

ページの読み込み時に、特定のDIVやアンカーの位置にスクロールされるようにするには、次のようなjQueryコードを使用することができます。

$(document).ready(function () {
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
// Source: stackoverflow

jsfiddleで、実際の動作を確認することができます。 この手法は、状況に応じて便利に使用することができます。 例えば、 WordPressのKBoard掲示板で書き込みをクリックするか、リストボタンを押すと、ヘッダ部分のために書くのフォームや掲示板の一覧が画面の下に位置することができます。 もし書くフォームや掲示板の一覧が画面の上部に位置することを希望する場合は、上記のスクリプトを応用することができます。

たとえば、次のようなスクリプトを使用すると、 KBoard 基本(Default)スキンを使用するときに書くボタンを押すと、画面が書くフォームにスクロールされます。

$(document).ready(function () {
$('html, body').animate({
scrollTop: $('#kboard-default-editor').offset().top
}, 'slow');
});

アバターのスキンの場合は、ID部分を #kboard-avatar-editorに変えてくれればされます。 WordPressでjsファイルをロード(enqueue)する方法は、 ここを参照してください。 他にも多様に応用することができるでしょう。

メモ:

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

2のコメント

コメントを残す

*メールアドレスは公開されません。