straw_manテンプレートスムーススクロール機能設定解説記事

straw_manテンプレートにおけるスムーススクロール機能関連部分の解説記事です。

困ったときのStrawMan Template総合案内板内では「アニメーションジャンプ」と呼称されてるやつです。

 

追記: グローバルナビゲーション内に設置する際の説明を追加しました。

スポンサーリンク

使い方

初期設定の必要はありません。ごくごくシンプルな二手順をこなすだけでオーケーです。

 

LV3さんが解説画像を作ってくれたので、ここに掲載。(クリックで拡大)

スムーススクロール設定の解説画像

 

この画像を見つつこの記事を読んでいくと少しはイメージしやすくなる……かも。

スクロール先の追加

任意のhtml要素にid属性を付け足します。

この属性を付け足したものが、「スクロールボタンを押した際、この要素までスクロールする」基準になります。

 

<!-- div要素に入れる場合 -->
<div id="tetete"></div>

 

注意点としては、同じページに同じidを持つ要素が複数ある状況にはしないこと。

もしそうなってしまうと、このスムーススクロール機能も上手く動かなくなってしまいます。

スクロールボタンの追加

<button class="smooth_anchor_scroll" type="button" data-target-id="tetete">アンカーテスト</button>

上記コードを任意の位置にコピペして、
data-target-id部分をページ内に存在するid名に書き換えてください。

 

これで前準備は完了です。

以下の条件を満たしている場合は、要素クリック時に当該要素へとスクロールするようになるでしょう。

  • class="smooth_anchor_scroll"が付与された要素に
  • data-target-id属性が付与されており
  • data-target-id属性で指定されたidを持つ要素がページ内に存在する

 

あとは、これを好きな場所に仕込んだり、そっけないボタンテキストを気の赴くままに装飾したり。

アイデア次第で何でも出来ます!(使用者に丸投げ)

細かい仕様の補足

やっつけスクリプトなので、<a>要素に付与した場合、通常のリンク処理が優先されると思われます。たぶん。(そのテストすらやってないやっつけ感)

 

もしdata-target-idで指定した要素が存在しない場合は動きません。

 

smooth_anchor_scroll以外のクラス名でも動くようにしたい場合は、
// ページ内スクロールイベントを付与するでテンプレート内を検索して出てくる以下部分を書き換えると良いでしょう。

var elArray = document.getElementsByClassName("smooth_anchor_scroll");

 

これを例えば、このように書き換えると、
smooth_anchorというクラス名が代わりの名前として扱われるようになります。

var elArray = document.getElementsByClassName("smooth_anchor");

追記: グローバルナビゲーション設置時に必要な追加記述

記事公開後に指摘されてようやく思い出したのですが、グローバルナビゲーションに設置する際はもう一手間必要でした。

is_close_global_navというクラス名をボタンにつけていないと、グローバルナビゲーションが即座に閉じられません。

 

なので、設置するボタンhtmlを以下のようにしてください。

<button class="smooth_anchor_scroll is_close_global_nav" type="button" data-target-id="tetete">アンカーテスト</button>

この記述方法ならば、グローバルナビゲーション内に設置してもうまく動くはずです。

補足: グローバルナビゲーション内で使えるステートクラス名リスト

クラス名 効果
is_close_global_nav クリック時にグローバルナビゲーションを閉じる
is_unclose_global_nav_clip 展開子項目内でクリック時に展開要素を閉じない

後になって追加したので、これについての注釈を載せるの忘れてました。申し訳ない。