JoeHTMLのaタグを使ってアンカー要素でページ内リンクしたい時、正しい方法をたまに忘れるのでメモします。クリック後のスクロールがずれてしまう問題も、解決指針を付け加えました。属性」を使って設定します。id="link-to-me">ここにジャンプして〜。不可)大文字・小文字を区別する特に、1のルールに関して注意が必要です。属性は「ページ内で唯一無二でなければならない」ですので、誤って2つ同じ名前記述してしまっても、ページの表示自体は、問題ありませんが、そのページ内リンクは期待通り動作しなくなるかもしれません。(HTMLの仕様書に基づくと「先に検出されたほう」が勝ち、そこにリンクします。名の管理はしばしば問題になります。属性を利用して要素をセレクトするのが一般的ですし、安全です。2リンク元のアンカー要素(aタグ)のhrefを指定するクリックされるアンカー側は、至ってシンプルです。href="#link-to-me">これをクリックすると、ページ内リンクにジャンプ</a>ID名の冒頭に「#」を付けるのを忘れないようにして下さい。#がない場合、「<現在のページの親ディレクトリ>/<指定したリンク>」という相対パスとして認識されてしまいます。属性」を使った方法も存在します。属性を利用する必要はありません。属性を使ったページ内リンクの利用は、将来を見据えて、避けるべきでしょう。属性を使う理由はないね。属性を使ってリンクしよう。ページ内リンクにジャンプしても、ずれてしまう?問題ページのレイアウトによっては、ページ内リンクに移動した後に、なんだか少しスクロール位置がずれてしまうかもしれません。原因は多くの場合、CSSを使ったレイアウトに起因します。わかりやすさのために色を付けると・・ページ内リンクは、この色を付けた領域の先頭が、ブラウザのウィンドウの上枠に一致するようににジャンプします。これを解決するのはそもそも要素のレイアウトに影響してしまうためすこし厄介ですが、いくつか迂回策があります。おすすめの解決策としては、「ページ内リンク専用の要素を追加する」です。要素で囲む一段内側にインライン要素を追加し、その要素に対してリンクすることで、解決します。例1:spanでテキストを囲む。ピッタリ上がジャンプ位置になる。id="link-1">ここにいるよ〜。要素のピッタリ上にブラウザの上端が来るようにジャンプします。上記と似ていますが、こちらの方法はスクロール位置(オフセット)を柔軟に対応できます。指定して、絶対座標を指定することで、オフセット(ジャンプ位置をどの方向に、どのくらいずらすか)を指定できます。要素自体の大きさはゼロですので、レイアウトに影響しません。hiddenで視覚的にも表示されないようにしています。例2:spanをテキストの直前に挿入。class="ex2"></span>ここにもいるよ。プロパティの値で、オフセットを設定できます。top:-30px;}</style>セマンティック(文書の意味的な)な観点で、「意味のない要素を追加する」のはすこし気が引けますし、HTMLも汚れる、言ってしまえばハックなのであまりおすすめはしませんが、どうしても手早く直したい時は使えると思います。こなれたCSSの使い方だね。利用経験があれば、それほど難しくないでしょう。利用しているのであれば、この方法の導入は容易です。属性でなくても構いません。class="target">ここにもいるよ。ずらしたいY軸方向の値。ページ内の対象要素へジャンプ。入れれば、ページトップまでスクロールバックすることができますので、「ページトップへ戻る」として利用できます。関数を利用すれば、スクロールアニメーションを利用できます。通常はCSSプロパティを記述する使用ですが、追加的に「scrollTop」「scrollLeft」という値を受け付けます。これにより、所望の速度でスクロールを実施できます。部分を書きで置き換えます。要素には適応出来ないことがあります。$(‘html’).animate({scrollTop:100})と言った別々の記述を受け付けるため、併記する必要があります。animationこの方法であれば、要素内部のスクロールもアニメーションで実装できるみたいだね。使ったプラグインです。筆者としては、ページ内リンク機能の実現は、こちらのプラグインをおすすめします。ありますので、こちらを読み込んでください。(Github)ずれる問題も、「オフセット」という引数を指定することで、簡単に解決できますし、ぬるっとしたスムーズなスクロールしてくれるので、いい感じです。HEADタグ内で読み込んで下さい。アニメーション効果});</script>GitHub上のドキュメントにはいろいろと詳しく書いていますが、基本的な動作させるにはそんなに難しくないので、javascriptはちょっと・・、という方も、おすすめします。ロジックと分離して記述できるから、サクッと追加しやすいね。