cocoon(WordPress)でページ内リンクをスムーズにスクロールする方法

WordPressでページ内のリンク(目次やアンカーリンク)に対してクリックしたとき、動きをスクロールする(スムーズにする)には以下のタグを挿入するだけでOK

スポンサーリンク

CSSのコード

スタイルシートにこのコードを追加するだけです。

html {
    scroll-behavior: smooth;
}

 

これでリンククリック時にスルスルスルーっとスクロールします。

もとに戻るにはバックスペースキーや戻るショートカットでスルスルもとに戻る。

cocoonの場合

外観→カスタマイズへ進む

 

追加CSSにコピペで貼り付けるだけです。

これを公開して作業は完了です。

貼り付けながら横のプレビューで自身のサイトのページの動きを確認できます。

コンテンツのTOPへ戻るアンカーリンク

#containerというリンクをいれておけば、どのページでもページ上部までワンクリックで戻れるので便利です。

#container

目次と一緒にサイドバーに設置すると使い勝手が良いかもですね。

サイドバーのスクロールメニューなどにテキストでウィジェット追加しても良さそうです。

 

メニューにリンクを追加してサイドバーに設置すると見た目も整いやすいので便利です。

以下メニューを作成してリンク追加する手順

簡単な実装手順

メニューを作成

ページ上部へ リンク

リンクURL:#container

 

cocoonのウィジェットを追加

ページスクロール領域にナビゲーション・メニュー追加

メニューをページ上部へ を選択して保存

 

以上でページ上部へ戻るリンク完成。

 

これもクリックすればスムーズにスクロールするので便利です。

 

タイトルとURLをコピーしました