[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)する方法は、 ここを参照してください。 他にも多様に応用することができるでしょう。
メモ:
一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。
黒黒ありがとうございます........
ブログを訪問していただきありがとうございます。