WordPressでページ内のリンク(目次やアンカーリンク)に対してクリックしたとき、動きをスクロールする(スムーズにする)には以下のタグを挿入するだけでOK
CSSのコード
スタイルシートにこのコードを追加するだけです。
html { scroll-behavior: smooth; }
これでリンククリック時にスルスルスルーっとスクロールします。
もとに戻るにはバックスペースキーや戻るショートカットでスルスルもとに戻る。
cocoonの場合
外観→カスタマイズへ進む
追加CSSにコピペで貼り付けるだけです。
これを公開して作業は完了です。
貼り付けながら横のプレビューで自身のサイトのページの動きを確認できます。
コンテンツのTOPへ戻るアンカーリンク
#containerというリンクをいれておけば、どのページでもページ上部までワンクリックで戻れるので便利です。
#container
目次と一緒にサイドバーに設置すると使い勝手が良いかもですね。
サイドバーのスクロールメニューなどにテキストでウィジェット追加しても良さそうです。
メニューにリンクを追加してサイドバーに設置すると見た目も整いやすいので便利です。
以下メニューを作成してリンク追加する手順
簡単な実装手順
メニューを作成
ページ上部へ リンク
リンクURL:#container
cocoonのウィジェットを追加
ページスクロール領域にナビゲーション・メニュー追加
メニューをページ上部へ を選択して保存
以上でページ上部へ戻るリンク完成。
これもクリックすればスムーズにスクロールするので便利です。