メニューを開く 項目を開く 記事投稿時刻 コメント トラックバック カテゴリー ブログテーマ タグ URLリンク コメントの編集 コメントに返信する

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

2023/03/10  19:13
0
straw_manテンプレートにおけるスムーススクロール機能関連部分の解説記事です。
困ったときのStrawMan Template総合案内板内では「アニメーションジャンプ」と呼称されてるやつです。

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



当記事の文章とコードはリラ様の著作物です


リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。

このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。

共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました（詳細な経緯はこちら）。


もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。



最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています（当サイトの著作物について）。

ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。



文責：秋田LV3





使い方


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

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

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


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



スクロール先の追加


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

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

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

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

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




スクロールボタンの追加



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

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

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

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




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


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

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


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

  1. <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
展開子項目内でクリック時に展開要素を閉じない


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



madasanagi_mini.png
まださなぎ © Proudly written by dettalant


StrawMan Template総合案内板へ戻る
関連記事

コメント

コメントの投稿