コピペOK　ページ内リンクを作り、スムーズにスクールしたい

今回は同じページからリンクを設置し、指定した場所に飛ぶリンクの貼り方を紹介します

hrefとidを用いてリンクを作る
ゆっくりスクロールしページを移動する方法

hrefとidを用いてリンクを作る

HTMLの基本としてidとhrefを紐づけることでページ内で飛ぶことができます。例として

<nav class="headB">
  <ul>
    <li><a href="./">TOP</a></li>
    <li><a href="#menu">MENU</a></li>
    <li><a href="#concept">CONCEPT</a></li>
    <li><a href="#news">NEWS</a></li>
    <li><a href="#SNS">SNS</a></li>
    <li><a href="#access">ACCESS</a></li>
    <li><a href="#contact">CONTACT</a></li>
    <li><a href="#take_out">TAKE OUT</a></li>
  </ul>
</nav>

こういったヘッダーがあるとします。

<a>タグのhrefは＃○○となっています。これが重要で#から始まりそのあと任意の文字を決めます。

その後<a>タグをクリックした後に飛ばしたいセクションの設定をします。

<div class="container">
　<h2>MENU</h2>
  <p class="s-font">専門店です。</p>
  <p>カレーはオススメです</p>
</div>

このようなウェブの記事に移動しようとします。

次に、<div class=”container”>のタグにidを追加します。その際、idの名前は<a>タグのhrefで決めた名前にします。

href=”#同じ名前” 　id=”同じ名前“

<div class="container"　id="example">

divにidをつけることでページ内リンクをつくることができ、紐づけができます。

idの名前には#を付けないでください。id=”example”としてください

ゆっくりスクロールしページを移動する方法

何も設定しない場合、一瞬で画面移動します。もっとおしゃれにスムーズに移動したい場合以下のコードを入れてください。今回解説は省きます。

<script>
    $(function () {
      // #で始まるリンクをクリックしたら実行されます
      $('a[href^="#"]').click(function () {
        // スクロールの速度
        var speed = 1500; // ミリ秒で記述
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? "html" : href);
        var position = target.offset().top;
        $("body,html").animate({
            scrollTop: position,
          },
          speed,
          "swing"
        );
        return false;
      });
    });
  </script>

<head>タグ内に入れてください。自動的に#がついたリンク移動をする際、スムーズにスクロール移動します。ぜひ使ってみてください。

コピペOK・ページ内リンクを作り、スムーズにスクロール移動

hrefとidを用いてリンクを作る

ゆっくりスクロールしページを移動する方法

コメント