[jQuery] ページ遷移時（読み込み時）にoverflow:scroll;の要素内だけでスクロールさせる。
割とありそうでなかったタイトルの処理に四苦八苦してなんとかできましたので、備忘録。
アンカーリンクだといくつか検索で出てくる
アンカーリンクでoverflow:scroll;の要素内にスムーススクロールさせる処理は検索したらいくつか出てきました。
参考：スクロールするレイヤー内でアンカーリンクを設置して指定位置までスクロールさせる -『javascript』
アンカーリンク先の要素がoverflow:scroll;になっていることはたまにあると思います。この記事のように対策をしないと、ページ全体の方もスクロールしてしまって、意図しない処理になってしまいます。色々な方法がありましたが、この記事が一番スマートのように感じました。
ページ遷移時（読み込み時）だと情報無し
上記を埋め込んでみたのですが、私が実装したサイトでは上手く動作しませんでした。よく調べたらちょっと複雑なシステムを組んでいて、アンカーリンクを設定したボタンを押した後に読み込み処理を行っていたのです。
ここで方向転換して「ページ遷移時（読み込み時）」に絞ったのですが、検索では出て来ず。先人の皆様の知恵を結集して何とか完成させました。
サンプルコード
$(function(){
var urlHash = location.hash;
//ハッシュ値があればページ内スクロール
if(urlHash) {
//スクロールを0に戻す
$('body,html').stop().scrollTop(0);
setTimeout(function () {
//ロード時の処理を待ち、時間差でスクロール実行
scrollToAnker(urlHash) ;
}, 100);
}
function scrollToAnker(urlHash) {
//URL Hashの動きを定義
var target = $(hash);
var targetP = $(target).position();
//.hogeはoverflow:scroll;している要素に変換
var scrollP = $('.hoge').scrollTop();
var position = targetP.top + scrollP;
$('body,html').stop().animate({scrollTop:position}, 500);
}
});
スクロールするレイヤー内でアンカーリンクを設置して指定位置までスクロールさせる -『javascript』
jquery、ページ内スクロール、ページ外スクロール実装コード
ポイント
固定ヘッダーを設定している際は、追加の処理が必要です。上記参考リンクにも書かれているので試してみてください。
jQueryは少し勉強すれば、他の人が書いたコードが何をしているのか何となく理解できると思います。
本当は一から自分で全部書けるのが理想なんですけどね…
なにか不備があればコメントにてご指摘ください！
この記事が気に入ったらサポートをしてみませんか？