リンク欄にAタグの情報が乗らない

Question

ヘッダーに設置したボタンでクリックしてページを飛ぶと、なんかずれる。
なので解決させるために調べて取得したコードを実装してみた結果。

$(function () {
 var headerHight = 10000; //ヘッダの高さ
 $('a[href^="#"]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});

ヘッダーの位置ずれは解消されましたが、
リンクの欄にAタグの情報が乗らなくなりました。

↓

jsやjQueryの知識はほぼないです、
なんとなくこことここが結びつくってのがわかるので自分なりにいじっていろいろやってみましたが、、、
悪化しただけでした。。。
一つわかったことといえば

$('a[href^="#"]')の["#"]ってところでリンクの情報を獲得しているという事くらいです。
獲得するとは逆に出力するみたいな要素、、、例えば
URLにAタグの情報を出力するなんらか要素があるのでしょうか。。。

そもそもなぜ出力されていないのでしょうか。

追記
ボタンの情報

<ul class="nabox">

<a href="#button1" class="menubutton">
      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="1">
            <li style="display: inline-block;">

<input type="button" class="nab"
       value="1"
       id="button1"
       onclick="disabled = true;
       getElementById('button2').disabled = false;
       getElementById('button3').disabled = false;
       getElementById('button4').disabled = false;
       getElementById('button5').disabled = false;">

            </li>
      </div></a>

<a href="#button2" class="menubutton">
      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="0">
            <li style="display: inline-block;">

<input type="button" class="nab"
       value="2"
       id="button2" disabled
       onclick="disabled = true;
       getElementById('button1').disabled = false;
       getElementById('button3').disabled = false;
       getElementById('button4').disabled = false;
       getElementById('button5').disabled = false;">

            </li>
      </div></a>

<a href="#button3" class="menubutton">
      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="2">
            <li style="display: inline-block;">

<input type="button" class="nab"
       value="3"
       id="button3"
       onclick="disabled = true;
       getElementById('button1').disabled = false;
       getElementById('button2').disabled = false;
       getElementById('button4').disabled = false;
       getElementById('button5').disabled = false;">

            </li>
      </div></a>

<a href="#button4" class="menubutton">
      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="3">
            <li style="display: inline-block;">

<input type="button" class="nab"
       value="4"
       id="button4"
       onclick="disabled = true;
       getElementById('button1').disabled = false;
       getElementById('button2').disabled = false;
       getElementById('button3').disabled = false;
       getElementById('button5').disabled = false;">

            </li>
      </div></a>
      
<a href="#button5" class="menubutton">
      <div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="4">
            <li style="display: inline-block;">

<input type="button" class="nab"
       value="5"
       id="button5"
       onclick="disabled = true;
       getElementById('button1').disabled = false;
       getElementById('button2').disabled = false;
       getElementById('button3').disabled = false;
       getElementById('button4').disabled = false;">

            </li>
      </div></a>



</ul>

Answer 1

urlの#以降の文字列はフラグメント識別子といいます。
jqueryではイベントハンドラ（.clickの中身）内に return false;と書くと、要素本来の動作がキャンセルされます。
ボタンを押してもフラグメント識別子が追加されないのは、リンクを押したときに発生する「URLを書き換えて該当箇所に移動する」という要素本来の動作が、追加したスクリプトでキャンセルされているからです。

最初に掲示されているスクリプトから return false; の部分を削除すると、スムーズなスクロールをしつつフラグメント識別子も追加されるという動作になるはずです。

$(function () {
  var headerHight = 10000; //ヘッダの高さ
  $('a[href^="#"]').click(function () {
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top - headerHight; //ヘッダの高さ分位置をずらす
    $("html, body").animate({ scrollTop: position }, 550, "swing");

    // return false;
  });
});

Comments

[HHH-]

みやはるさん！いえミヤハル様！

本当に、、、(´；ω；｀)
本当に涙ですｗ

こんな単純なことだったとは自分が憎い。。。。
以前からこれと似たような投稿を何度もしましたがだれも回答してくれませんでした。。。
年明け前ってのも大きな原因の一つだったと思いますが、、

私にとって、今がその年明けのように感じます

こんな小さな分列一つに何日も何日も、、、はぅ(´；ω；｀)つらかったけど
あなたに救われました！
Jsを自分のタイミングで勉強する気でいましたが
今回の件を解決するためだけにゼロから勉強するのはあまりにも酷すぎる、、、

せめて自分のやりたいことにJsの勉強をしたいと思っていました(´；ω；｀)

あなたはそれを叶えてくれた！
このサイトにどんどんJSで学んだことを書き込んでいくつもりです。
ありがとうございました。

[HHH-]

あけおめです。

[miyaharu]

あけましておめでとうございます。お役に立てて何よりです。

モチベーションを保つという面で、やりたいことにそって学習を進めていく方法は有効だと思います。
今後はそれと並行して基礎的な部分の学習も進めてみてはいかがでしょうか。

JSに限りませんがプログラミング言語を習得するには、体系だったドキュメントや入門書籍などをこなすことがとても有効だと私は思います。経験がないうちはドキュメントの文量の多さに辟易してしまうかもしれませんが、理解が及んでいない情報を断片的に集めて今回のようにはまってしまうよりは、かえって時間の節約になります。

全部をすみずみまで読む必要はありません。初級編や基礎編、興味がありそうな項だけでも読んでおくとよいと思います。また、全体を見通すという意味で、目次に一通り目を通しておくと後で役に立ちます。

firefoxの開発元が提供しているweb関連のドキュメントが色々まとまっていておすすめです。
https://developer.mozilla.org/ja/docs/Learn/JavaScript

[HHH-]

ありがとうございます！