- このトピックには7件の返信、2人の参加者があり、最後に
により5年、 8ヶ月前に更新されました。
-
投稿
-
次のような状態で、グローバルメニューをクリックすることで、各セクションにスムーススクロールさせたいと思っています。
（１）トップページを固定ページに設定して、SnowMonkeyBlocksのセクションブロックでいくつかに分割した上で、それぞれのセクションに「HTML アンカー」を設定。
（２）グローバルメニューのそれぞれのセクションのリンクURL（https://xxx/#anchor）を設定
この状態で、グローバルメニューのaタグにクラスu-smooth-scrollをつけてページ内リンクをスムーススクロールさせたいです。
WordPressのメニュー設定で「CSS class (オプション)」というところに指定した場合は、リストタグにclassが不可されるようで、スムーススクロールされません。もし方法があれば教えて頂ければと思います。
よろしくお願いします。いいねをした人: 居ません.u-smooth-scrollは、リストタグに class がついていてもスムーススクロールになります。もしかしたら過去のバージョンでは正しく動作しない場合があるかもしれませんが、最新版では大丈夫なはずです（v5.4.3）。あ、一つ気になるのは「https://xxx/#anchor」と URL の形式なことですかね。「#anchor」だと動くと思いますが、URL 形式だとダメかもです。
いいねをした人: 居ませんなるほどー、確かにURL形式ではなく「#anchor」にしたらスムーススクロールできました！
今回の用途は、トップページをセクションに分けて、カテゴリごとの各コンテンツの目次（入り口）を上から並べて表示。
そして、どのページからでもコンテンツを探しやすいように、グローバルメニューにトップページ内の各セクション（カテゴリごとの目次）にアンカーを設定したという感じです。
ただ、書いていて確かに特殊な使い方だなぁと今思ってきました・・・ ^^;
URL形式のままトップページ内ではスムーススクロールスクロールにするのは難しいのでしょうか？
いいねをした人: 居ませんちょっと検証中ですが、下記の2つのパターンを満たす変更はできそうです。
パターン1
- http://example.com/ を開いている
- http://example.com/#section1 というリンクをクリック
- スムーススクロールで #section1 に移動
パターン2
- http://example.com/page1/ を開いている
- http://example.com/#section1 というリンクをクリック
- http://example.com/#section1 が開く（スムーススクロールはなしで、#section1 にスクロールされた状態で開く = 通常のアンカーリンクの開き方）
いいねをした人: 居ません- トップページ内はスムーススクロール、
- それ以外のページからは該当箇所（#section1）にスクロールされた状態で開く
を想定していたので、まさにパターン１、パターン２を満たした状態になれば嬉しいです！
いいねをした人: 居ません
- トピック「グローバルメニューのaタグに、クラスu-smooth-scrollをつけてページ内リンクをスムーススクロールさせたい」には新しい返信をつけることはできません。