目次
js、jQueryでスクロール位置を保持する
今回は、js、jQueryを使用して画面遷移しても対象要素のスクロール位置が保持される機能です。
早速ソースを見ていきましょう。
ソース
<script>
$(function(){
// 変数宣言
let scroll_top = '';
// ・画面表示時
// 1.cookieから取得して変数へ格納
scroll_top = $.cookie('scroll_top');
// 2.cookie削除
$.removeCookie(scroll_top);
// 3.navタグのスクロール位置の指定
$('nav').scrollTop(scroll_top);
// navタグをスクロールしたときの処理
$('nav').scroll(function() {
// 1.navタグの垂直方向のスクロール位置の取得
scroll_top = $('nav').scrollTop();
// 2.cookieに保存
$.cookie('scroll_top', scroll_top);
});
});
</script>解説
cookieを使用してスクロールの位置を取得したり、保存したりします。
- 画面表示時
- cookieに保存されているスクロール位置を取得して変数.scroll_topに格納
- cookieを削除する
- 対象要素(今回はnavタグ)のスクロール位置を指定する
- スクロール時
- 対象要素の垂直方向のスクロール位置を取得して変数.scroll_topに格納
- cookieに変数.scroll_topを保存
初回画面表示時はスクロールされていないためcookieからの取得はありません。
画面表示後、スクロールされるとcookienにスクロール位置が保存され、画面遷移後も対象の要素のスクロール位置が保持されます。
