はじめに
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は適宜設定をしてください）
終わりに
ご覧いただきありがとうございました。