はじめに

jQueryを使って、クリックするとリンク先までスクロールするアニメーションを実装していきます。

完成イメージ

後日添付

環境

MacOS 10.15.7
ruby 2.6.5
Ruby on Rails 6.0.0

前提条件

jQueryが導入済みであること

作業していきます。

①html.erbの作成

application.html.erb

...上記一部省略...
<body>
  <header class="header">
    <div class="menus">
      <a href="#0", class="menuLink">Top</a>
      <a href="#1", class="menuLink">Category</a>
      <a href="#2", class="menuLink">Prefecture</a>
      <a href="#3", class="menuLink">New Posts</a>
    </div>
  </header>
</body>

hrefにそれぞれ「#0」「#1」「#2」「#3」と設定します。

○○○.html.erb

<div class='mainWrapper'>
  <div class='menu' id="0">
    <p class='headMessage'>
      menu1
    </p>
  </div>
  <div class='menu' id="1">
    <p class='headMessage'>
      menu2
    </p>
  </div>
  <div class='menu' id="2">
    <p class='headMessage'>
      menu3
    </p>
  </div>
  <div class='menu' id="3">
    <p class='headMessage'>
      menu4
    </p>
  </div>
</div>

menuごとにそれぞれidを付与します。

②jsファイルの作成

○○○.js

$(function(){
  $('a[href^="#"]').click(function(){
    let speed = 500; /* 数値を変更することでスクロールスピードが変化 */
    let href= $(this).attr("href");
    let target = $(href == "#" || href == "" ? 'html' : href);
    let position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

$('a[href^="#"]').click(function()でhrefに「#」が付与されているもの全てをクリックするとスクロールイベントが発火するようにして、クリックされたmenuの場所にスクロールアニメーションが発動します。

これで完成です。
（CSSは適宜設定をしてください）

終わりに

ご覧いただきありがとうございました。

jQueryを使ってクリックするとリンク先までスクロールするアニメーションの実装する