ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ページの読み込み時に、特定のDIVやアンカー(anchor)の位置にスクロールされるようにする場合には、次のような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)する方法は、 ここを参照してください。 他にも多様に応用することができるでしょう。

メモ:



コメントを残す

コメント