rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

ウィンドウのスクロール位置を保持したままページ遷移する方法

      JavaScript, 開発

  • このエントリーをはてなブックマークに追加
  • Pocket

プログラミング

ウィンドウのスクロール位置を保持したままページ遷移する方法を調べていまして、ざっくり次のような方法で対応してみました。

まずこちらが遷移前ページの html 。リンク押下時の window スクロール位置を取得して、get パラメータとして渡します。(ここを post なりセッションに入れるなりはお好みで。)

<script type="text/javascript">
savePosToNextPage = function() {
    xpos = document.documentElement.scrollLeft || document.body.scrollLeft;
    ypos = document.documentElement.scrollTop || document.body.scrollTop;
    location.href = "next.php?xpos=" + xpos + "&ypos=" + ypos;
}
</script>

<a href="javascript:;" onClick="savePosToNextPage();">ページ移動する</a>

こちらが遷移後のページ(PHP の場合)。get パラメータで渡されたスクロール位置を取得して、ページ読み込み後にその位置に windows をスクロールさせます。

$xpos = $_GET['xpos'];
$ypos = $_GET['ypos'];

<script type="text/javascript">
window.onload = function(){
    window.scroll(<?php echo $xpos;>, <?php echo $ypos;>);
}
</script>

これで動作的には概ね求めていたものができましたが、何かベタで古くさい感じが否めないような・・・。

他にもっとスッキリした方法あるんでしょうかね?

photo credit: Dmitry Baranovskiy via photopin cc

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

地図
JavaScriptでUserAgentからスマートフォン判別して地図サイズ切り分け

photo credit: Annie Mole via photopin cc …

佐藤紳哉
佐藤紳哉七段をもっとイケメンに変身させるChrome拡張を作ってみました

※この記事は「将棋 Advent Calendar 2016 – A …

棋士出身地マップ
将棋棋士データベースで遊ぶ(4)〜OpenStreetMapで棋士出身地マップを作る〜

※この記事は「将棋 Advent Calendar 2016 – A …

D3.js
将棋棋士データベースで遊ぶ(8)〜棋士の師弟関係をD3.jsで可視化〜

※この記事は「将棋 Advent Calendar 2016 – A …

グラフ
「WordPressもくもく勉強会@群馬」の参加者状況を集計してD3.jsで可視化してみました

毎月最終木曜に開いている WordPress のもくもく会「WordPressも …

棋士データベースクイックサーチ
将棋棋士データベースで遊ぶ(6)〜クイックサーチ機能を作る〜

※この記事は「将棋 Advent Calendar 2016 – A …

棋士名ワードクラウド
将棋棋士データベースで遊ぶ(7)〜棋士名でワードクラウドを作る〜

※この記事は「将棋 Advent Calendar 2016 – A …

棋士出身地マップ
将棋棋士データベースで遊ぶ(5)〜棋士出身地マップに女流棋士を追加〜

※この記事は「将棋 Advent Calendar 2016 – A …

棋士の師弟関係
将棋棋士データベースで遊ぶ(9)〜棋士の師弟関係をD3.jsで可視化その2〜

※この記事は「将棋 Advent Calendar 2016 – A …

前橋育英
2017年センバツ出場校WebサイトにリボンをかけるChrome拡張を作ってみました

あれこれ忙しいことが続くと、自分が楽しめるものでも作って現実逃避したくなりますね …