スムーススクロールでページ内リンクへ飛ぶ方法と他ページからトップページのリンク先へ戻る方法

こんにちは!じゃんきーです。

今回はLP制作でよく実装する
スムーススクロールでページ内リンクへ移動する方法」と合わせて
他ページへ遷移した時にトップページのリンク先へ戻る方法」を
ご紹介いたします。

Aさん

よくメニューをクリックした時に、サーっとその場所まで移動するやつがあるけど、それを作りたいな

Bさん

他のページにいる時に、メニューをクリックしても、トップページに戻れない

このように考える方も多いと思います。

そのような方のためにSnowMonkeyテーマを用いて、プラグインを使用せずに実装いたします。
難易度も高くないので、ぜひ試してみてください。

スムーススクロールでページ内リンクへ移動する方法

実装するのはこのような感じです↓

さっそく始めていきましょう!

about」というセクションへの移動を例にします。

アンカーの設置

①「about」セクションブロックの選択

「about」というセクションブロック全体が選択できている状態にします。

②右側の設定にある「高度な設定」をクリック

③HTMLアンカーに「about」と入力

アンカーリンクの設置

①WordPress管理画面へ戻る

②左側メニューから「外観」→「カスタマイズ」をクリック

③左側「メニュー」→「about」というメニューがあるメニュー名or新規作成→「項目の追加」をクリック

④カスタムリンクでメニューを作成

URLに「#about」、リンク文字列に「メニュー名(今回はABOUT)」

ここまでの設定でページ内リンクへ飛ぶことはできるようになります。

スムーススクロールの設定

①WordPress管理画面へ戻る

②「外観」→「メニュー」をクリック

③右上にある「表示オプション」をクリック

④「CSSクラス」にチェックをいれる

⑤ABOUTメニューを選択

⑥CSS classに「u-smooth-scroll」を入力

これでメニューをクリックした時のスムーススクロールは設定完了です!

他ページへ遷移した時にトップページのリンク先へ戻る方法

ここまでの設定では、他ページへ遷移した時に
またトップページへ戻ることができなくなってしまいます。

そのため、以下のような設定をすると次の動画のような挙動を再現できます。

①ABOUTメニューの選択

②URLに「サイトURL/#about」の形で入力

これだけです。簡単ですねw

以上で、実装完了とします。

今後もこのようなカスタマイズの方法を
ブログにしていこうと思います。
もしよろしければ今後もチェックしてみてください。

TwitterもやってるのでリプやDMでぜひ絡んでくださいね〜

この記事を書いた人

じゃんきー

こんにちは!じゃんきーブログを運営しているじゃんきーです。
1987年生まれ。
妻、子ども2人、ねこ1匹と暮らす30代の男。
大学卒業後、作業療法士として病院に10年以上勤務。
家族とのハワイ旅行などより豊かな生活を夢見て、副業に挑戦。
現在WordPressでのWEB制作、ShopifyでのECサイト制作を中心にフリーで活動中。
TwitterのDMなどお気軽にお問い合わせください。