スムーススクロールするサイトにモーダルを実装したい時の対処法

: ひぐま

2020.12.16

以前smooth-scroll.jsでスムーススクロールを実装する記事を書きました。

jQuery：「smooth-scroll.js」を使ってページ内リンククリック時の滑らかなスクロールを実装する

ユーザビリティ向上のため、サイトでのスムーススクロールの実装は一般的になっています。

しかし、アンカーリンクで表示を切り替えるモーダルを同じページで実装したい時、いつも通りのように設置すると...
アンカーリンクの箇所を押すとスムーススクロールするようにしているため、同じくアンカーで呼び出すモーダルと干渉して開かない！なんてことが以前ありました。

今回はそんな時に役立った「remodal」というモーダルのプラグインをご紹介します。

「remodal」ではID記述以外の呼び出しの指定が設定できるため、他のアンカーリンクと干渉しません。
多少HTMLは長くなりますが、背に腹は代えられませんので、早速設置していきましょう。

まずはダウンロードする

まずは下のボタンからダウンロードページへアクセスし、必要なファイルをHTMLに読み込みます。

GitHub(ダウンロードページ)

必要なファイルは以下の通りです。

remodal.css
remodal-default-theme.css
remodel.js

jQueryを読み込んでいないサイトの場合、そちらも設置が必要となりますのでお気をつけください。

読みこみ

　<link rel="stylesheet" href="../common/css/remodal.css" />
　<link rel="stylesheet" href="../common/css/remodal-default-theme.css" /> 
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
　<script type="text/javascript" src="../common/js/remodel.js"></script>

HTML

<main id="TOP">
 <div>
  <ul>
   <li><h2><a href="#link1" data-remodal-target="link1">注文の多い料理店</a></h2></li>
   <li><h2><a href="#link2" data-remodal-target="link2">銀河鉄道の夜</a></h2></li>
   <li><h2><a href="#link3" data-remodal-target="link3">こころ</a></h2></li>
   <li><h2><a href="#link4" data-remodal-target="link4">鼻</a></h2></li>
  </ul>
  
  <div class="remodal" data-remodal-id="link1">
   <div>
    <button data-remodal-action="close" class="remodal-close"><span class="top"></span><span></span></button>
    <h3>注文の多い料理店</h3>
    <p>　二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲てっぽうをかついで、白熊しろくまのような犬を二疋ひきつれて、だいぶ山奥やまおくの、木の葉のかさかさしたとこを、こんなことを云いいながら、あるいておりました。</p>
   </div>
  </div>
 
  <div class="remodal" data-remodal-id="link2">
   <div>
    <button data-remodal-action="close" class="remodal-close"><span class="top"></span><span></span></button>
    <h3>銀河鉄道の夜</h3>
    <p>「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p>
   </div>
  </div>
  
  <div class="remodal" data-remodal-id="link3">
   <div>
    <button data-remodal-action="close" class="remodal-close"><span class="top"></span><span></span></button>
    <h3>こころ</h3>
    <p>　私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。</p>
   </div>
  </div>
  
  <div class="remodal" data-remodal-id="link4">
   <div>
    <button data-remodal-action="close" class="remodal-close"><span class="top"></span><span></span></button>
    <h3>鼻</h3>
    <p>　禅智内供の鼻と云えば、池の尾で知らない者はない。長さは五六寸あって上唇の上から顋の下まで下っている。形は元も先も同じように太い。云わば細長い腸詰のような物が、ぶらりと顔のまん中からぶら下っているのである。</p>
   </div>
  </div>
  <p><a href="#TOP">TOPへ飛びます</a></p>
 </div>
</main>

呼び出しはhrefのかわりにdata-remodal-target=""を使用します。 <li><h2><a href="#link1" data-remodal-target="link1">注文の多い料理店</a></h2></li>
※モーダルだけ設置したい場合はhrefでも動作します。

表示したいモーダル部分はidではなくdata-remodal-id=""で指定します。

<div class="remodal" data-remodal-id="link1"> <div> <button data-remodal-action="close" class="remodal-close"><span class="top"></span><span></span></button> <h3>注文の多い料理店</h3> <p>　二人の若い紳士が、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲てっぽうをかついで、白熊しろくまのような犬を二疋ひきつれて、だいぶ山奥やまおくの、木の葉のかさかさしたとこを、こんなことを云いいながら、あるいておりました。</p> </div> </div>

※上記のtarget名とモーダルのidは名前を一致させてください。

モーダルを閉じるためのボタンは下記で設置しています。

  <button data-remodal-action="close" class="remodal-close"></button>

CSS

ul{ padding:0; }
 ul li{ display:inline-block; list-style:none; }
 ul li + li{ margin-left:20px; }
 .remodal{ width:90%; position:relative; }
 .remodal > div { min-height:200px; padding:20px; text-align:left; }
 .remodal > div > h3{ color:orange; margin-bottom:15px; }
 .remodal-close{
 text-decoration:none;
 border:none;
 border-radius:0;
 outline: none;
 background: transparent;
 position:absolute;
 top:20px;
 right:20px;
 }
 .remodal-close:after{ content:"×"; font-size:35px; }