質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 2
  • VIEW 12K+

score 32

今、<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でもやっても上手くいかず、根本的に知識が足りてないなと思いここでの質問に至りました。どうか宜しくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sleeeep12

    2017/11/02 16:54

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

    キャンセル

  • sleeeep12

    2017/11/02 16:56

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

    キャンセル

  • masaya_ohashi

    2017/11/02 16:58

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

    キャンセル

回答 3

+3

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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/02 16:43

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

    キャンセル

  • 2017/11/02 16:50

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

    キャンセル

  • 2017/11/02 17:40

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

    キャンセル

checkベストアンサー

+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を削除しておく
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/02 18:46

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

    もしかしてコードの配置の仕方が悪いのでしょうか。。
    その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を削除しておく
    });

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

    キャンセル

  • 2017/11/03 10:19

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

    キャンセル

  • 2017/11/05 16:25

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

    キャンセル

0

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/02 16:41

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る