ページ移動した後に特定の要素まで移動

Question

今、<a>タグをクリック後、ページ移動した後に特定の要素まで移動させるというのに挑戦してるのですが、なかなかうまくいきません。以下ナビだとします。

(「href="URL/#~~~"」とすれば、ページ移動と同時にその要素に移動はできますが、URLに/#~~~とついてしまい、都合が悪いです。)

<a id="link1" href="同じURL">あああ</a>
<a id="link2" href="同じURL">いいい</a>
<a id="link3" href="同じURL">ううう</a>

上のリンククリックで、「同じURL」に飛んだ後に、それぞれのIDごとに違う要素に移動というのをやりたいです。
理想は、例えば<a id="link1" href="同じURL">あああ</a>をクリックして、別ページに移動した瞬間に「id="Link1"」がついてる要素に移動するという感じです。

$('#link1').click(function() {
      $("html,body").animate({scrollTop:$('#Link1').offset().top});
  });

ネットで調べながらjqueryで今やってみたのですが、上記のコードではanimeteせずでした。
settimeでもやっても上手くいかず、根本的に知識が足りてないなと思いここでの質問に至りました。どうか宜しくお願いします。

Comments

[masaya_ohashi]

ちょっと確認なのですが、「同じURL」となっているのは、aタグが置いてあるページと同じURLという認識で正しいですか？それともaタグのあるページとは切り替わるページですか？

[sleeeep12]

「同じURL」は別ページのことで、上記の<a>タグも別ページということです。aタグのリンクで、ページは切り替わります。説明不足でした、すみません；

[masaya_ohashi]

ハッシュ(#)はつけたくないが、遷移先ページの特定の場所へスクロールしたい、ということですか？ハッシュを付けたくないということはクエリ(URLの後ろの?a=bのような文字列)が付くのもだめですか？

[sleeeep12]

はい、まさにそういうイメージでございます。

[masaya_ohashi]

うーん…JavaScriptオンリーでやりたいのですよね？ハッシュの付いたURLを「ハッシュ付きで遷移して、遷移後ハッシュ部分を消す」というのはありですか？

[sleeeep12]

どうでしょうか、、まだまだ知識が浅くて何とも答えられないのですが、そもそものURLにハッシュタグを付けたくない理由が、別コードで、「if(url == "http://URL"){〜〜〜}else{〜〜〜}」というコードを書いていて、URLに#〜が付くとその部分が動かなくなるからなんです。ここをいじっても良いんですが、かなり気持ち悪いコードになるかと思い、リンクでのアクションを操作しようと考えている次第です。

[sleeeep12]

あ、文が勝手に変換されてますが、「http://URL&quot;)」→「http://URL」です

[masaya_ohashi]

とりあえず別回答としてページをまたいでもなんとかする方法を書きました。

Answer 1

animateしたいのでしょうか？それともダイレクトにとんでいいのでしょうか？

$(function(){
  $(window).scrollTop($('#Link1').offset().top);
});

追記

念のため追記しておきます
load時に#d2にとばします

$(function(){
  $(window).scrollTop($('#d2').offset().top);
});

<div id="d1" style="height:1000px">d1</div>
<div id="d2" style="height:1000px">d2</div>
<div id="d3" style="height:1000px">d3</div>
<div id="d4" style="height:1000px">d4</div>

Comments

[sleeeep12]

早々なご回答ありがとうございます。
その要素までポンと移動するのかスクロールして表示するのかは特にこだわりはなく、どちらでも大丈夫です。

[yambejp]

ポンと移動していいなら追記のような感じでどうでしょうか？

[sleeeep12]

お返事ありがとうございます。
上記のコードで試して、ページ遷移はしたのですが、要素まで移動はされませんでした。。

Answer 2

別ページであることが発覚したのでそれ用に考え直してみました。

<a id="link1" href="同じURL">があるページの処理

$('#link1').click(function(e) {
  document.cookie = 'hiddenhash=Link1'; // cookieにhiddenhashという名前で飛びたい要素の名前を保存しておく
});

リンク先のページ

$(function() {
  var cookies = document.cookie.split(";"); // cookie文字列を;区切りで取得
  var map = {};
  for(var index in cookies) {
    var cookie = cookies[index].trim(); // 両端の空白を削除
    var pair = cookie.split("="); // cookieを=で分割
    map[pair[0]] = pair[1]; // cookieの値を連想配列に格納
  }
  // cookieの中にhiddenhashがあったら、該当の位置までスクロール
  if("hiddenhash" in map && map["hiddenhash"].length > 0) {
    $("html,body").animate({scrollTop:$('#' + map["hiddenhash"]).offset().top});
  }
  document.cookie = 'hiddenhash='; // cookieのhiddenhashを削除しておく
});

Comments

[sleeeep12]

大変ありがとうございます。
うーんこれでもダメみたいです、、、

[masaya_ohashi]

だめ、というとなにが問題なのでしょう？ログにエラーが出ていますか？私も動作確認まではしていないので、エラーがあったら報告してくれれば直せますよ

[sleeeep12]

コンソールログにはエラーはありませんでした。
視覚的な動作では、リンククリック後、ページ遷移はするものの要素までスクロールはされませんでした。

もしかしてコードの配置の仕方が悪いのでしょうか。。
そのaタグのナビゲーションはグローバルナビとして全てのページに存在しているのですが、今回はその他ページの場合のみ、aタグの動作を違う動作として操作しようとしています。なので

$('#link1').click(function(e) {
document.cookie = 'hiddenhash=Link1'; // cookieにhiddenhash
});

のコードを

if(url == "http://トップページ){~~~}else{~~~}　の　else{~~~}の部分に配置しました。

そして、このfunctionが終わって、次のfunctionとして

$(function() {
var cookies = document.cookie.split(";"); // cookie文字列を;区切りで取得
var map = {};
for(var index in cookies) {
var cookie = cookies[index].trim(); // 両端の空白を削除
var pair = cookie.split("="); // cookieを=で分割
map[pair[0]] = pair[1]; // cookieの値を連想配列に格納
}
// cookieの中にhiddenhashがあったら、該当の位置までスクロール
if("hiddenhash" in map && map["hiddenhash"].length > 0) {
$("html,body").animate({scrollTop:$('#' + map["hiddenhash"]).offset().top});
}
document.cookie = 'hiddenhash='; // cookieのhiddenhashを削除しておく
});

を配置しました。
これが問題なのでしょうか。。。

[masaya_ohashi]

いろいろな箇所にconsole.logを入れて、どこまで処理が呼ばれているか、document.cookie、map、hiddenhashの値はどうなっているかを確認してみてください

[sleeeep12]

ありがとうございました。色々確認しながら調べたり試行錯誤して、ついにできました。感謝です！！！

Answer 3

この処理は「リンクが置いてあるページとスクロールしたい場所が同一ページ内にある場合」のみの処理です

scrollTopに渡しているidが#Link1で大文字になっているのが原因ではないでしょうか。
あと、clickイベントをpreventDefaultしたら#がURLに付く処理を止められます。

$('#link1').click(function(e) {
  e.preventDefault();
  $("html,body").animate({scrollTop:$('#link1').offset().top});
});

Comments

[sleeeep12]

早々なご回答ありがとうございます。
#linkはaタグについているIDで、#Linkはリンク先のページに存在する要素についてるidですね。
aタグクリック→ページ移動→そのページの特定の要素の部分を表示、といったイメージです。分かりづらくてすみませんでした ;_;