Q&A私も初めての経験で、色々調べたのですが解決できないため、質問させていただきます。
firefoxのみ、とあるアンカーリンクが意図したところとずれた場所に飛んでしまいます。
一番下にあるアンカーリンクについてうまくいかず、該当の場所より下のblockに飛びます。
下記例でいうと、リンク10がうまくいかない感じです。
外部ページからもアンカーリンクを使う予定です。
HTML5
1 2<body> 3 <header> 4 </header> 5 <!-- 右コンテンツ --> 6 <div class="content_right"> 7 <div id="link1"></div> 8 <div id="link2"></div> 9 | 10 <div id="link9"></div> 11 <div id="link10"></div> 12 </div> 13 <!-- content_right --> 14 <!-- 左コンテンツ --> 15 <div class="content_left"> 16 <ul class="page_menu"> 17 <li> 18 <a href="#link1">リンク１</a> 19 </li> 20 <li> 21 <a href="#link2">リンク２</a> 22 </li> 23 ｜ 24 <li> 25 <a href="#link9">リンク９</a> 26 </li> 27 <li> 28 <a href="#link10">リンク10</a> 29 </li> 30 </ul> 31 </div> 32 <!-- content_left --> 33 <div class="clear"></div> 34<div class="test1"></div> 35<div class="test2"></div> 36<footer></footer> 37</body> 38 39
試したこと
・該当blockとその１つうえにあるblockとを逆にしてみると、どちらも正しく動く
・id名を別の名前にしてみてもNG
・プラグインもダメ
smoothScrollEx.js など
http://creator-index.com/2015/03/870/
有識者の皆様、どうかお力をお貸しください。
何卒よろしくお願いいたします。
回答2件
0
とりあえず、以下の3つを直してみては？
0. ulタグの対応がとれていない。
0. 1つ不要なdivタグがある。
0. aタグのhref属性の値の先頭に#をつける。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 </style> 12</head> 13<body> 14<header> 15</header> 16<!-- 右コンテンツ --> 17<div class="content_right"> 18 <div id="link1"></div> 19 <div id="link2"></div> 20 | 21 <div id="link9"></div> 22 <div id="link10"></div> 23</div> 24<!-- content_right --> 25<!-- 左コンテンツ --> 26<div class="content_left"> 27 <ul class="page_menu"> 28 <li> 29 <a href="#link1">リンク１</a> 30 </li> 31 <li> 32 <a href="#link2">リンク２</a> 33 </li> 34 ｜ 35 <li> 36 <a href="#link9">リンク９</a> 37 </li> 38 <li> 39 <a href="#link10">リンク10</a> 40 </li> 41 </ul><!-- ここ。 --> 42</div> 43<!-- content_left --> 44<!-- </div>ここ。 --> 45<!-- area content_area --> 46<div class="clear"></div> 47<div class="test1"></div> 48<div class="test2"></div> 49<footer></footer> 50</body> 51</html>
投稿2017/04/03 11:35
編集2017/04/03 11:36
総合スコア14731
0
自己解決
再度色々と調べまして、下記サイトを参考にしてなんとか解決しました。
https://ito-mikidesign.goat.me/3wjSawDd
$(window).load(function (){ if(top.location.href.match(/\#目標アンカーID$/)){ top.location.href = "hoge.html#目標アンカーID" } });
s8_chuさま、お力添えいただきありがとうございました！
投稿2017/04/07 02:16
総合スコア21
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/04 00:23