グローバルメニューのaタグに、クラスu-smooth-scrollをつけてページ内リンクをスムーススクロールさせたい

1
いいねをした人:
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #12177
    HiROE
    参加者
    46

    次のような状態で、グローバルメニューをクリックすることで、各セクションにスムーススクロールさせたいと思っています。

    (1)トップページを固定ページに設定して、SnowMonkeyBlocksのセクションブロックでいくつかに分割した上で、それぞれのセクションに「HTML アンカー」を設定。

    (2)グローバルメニューのそれぞれのセクションのリンクURL(https://xxx/#anchor)を設定

    この状態で、グローバルメニューのaタグにクラスu-smooth-scrollをつけてページ内リンクをスムーススクロールさせたいです。
    WordPressのメニュー設定で「CSS class (オプション)」というところに指定した場合は、リストタグにclassが不可されるようで、スムーススクロールされません。

    もし方法があれば教えて頂ければと思います。
    よろしくお願いします。

    0
    いいねをした人: 居ません
    #12179
    アバター画像キタジマ タカシ
    参加者
    2421

    .u-smooth-scroll は、リストタグに class がついていてもスムーススクロールになります。もしかしたら過去のバージョンでは正しく動作しない場合があるかもしれませんが、最新版では大丈夫なはずです(v5.4.3)。

    あ、一つ気になるのは「https://xxx/#anchor」と URL の形式なことですかね。「#anchor」だと動くと思いますが、URL 形式だとダメかもです。

    0
    いいねをした人: 居ません
    #12188
    HiROE
    参加者
    46

    なるほどー、確かにURL形式ではなく「#anchor」にしたらスムーススクロールできました!

    今回の用途は、トップページをセクションに分けて、カテゴリごとの各コンテンツの目次(入り口)を上から並べて表示。

    そして、どのページからでもコンテンツを探しやすいように、グローバルメニューにトップページ内の各セクション(カテゴリごとの目次)にアンカーを設定したという感じです。

    ただ、書いていて確かに特殊な使い方だなぁと今思ってきました・・・ ^^;

    URL形式のままトップページ内ではスムーススクロールスクロールにするのは難しいのでしょうか?

    0
    いいねをした人: 居ません
    #12194
    アバター画像キタジマ タカシ
    参加者
    2421

    ちょっと検証中ですが、下記の2つのパターンを満たす変更はできそうです。

    パターン1

    • http://example.com/ を開いている
    • http://example.com/#section1 というリンクをクリック
    • スムーススクロールで #section1 に移動

    パターン2

    • http://example.com/page1/ を開いている
    • http://example.com/#section1 というリンクをクリック
    • http://example.com/#section1 が開く(スムーススクロールはなしで、#section1 にスクロールされた状態で開く = 通常のアンカーリンクの開き方)
    0
    いいねをした人: 居ません
    #12195
    HiROE
    参加者
    46
    • トップページ内はスムーススクロール、
    • それ以外のページからは該当箇所(#section1)にスクロールされた状態で開く

    を想定していたので、まさにパターン1、パターン2を満たした状態になれば嬉しいです!

    0
    いいねをした人: 居ません
    #12196
    アバター画像キタジマ タカシ
    参加者
    2421

    Snow Monkey v5.4.4 で修正してみました。確認おねがいします!

    0
    いいねをした人: 居ません
    #12198
    HiROE
    参加者
    46

    確認しました!

    バッチリ、いい感じになりました。
    ありがとうございました!

    0
    いいねをした人: 居ません
    #12213
    アバター画像キタジマ タカシ
    参加者
    2421

    良かったです!トピック閉じますー。

    0
    いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「グローバルメニューのaタグに、クラスu-smooth-scrollをつけてページ内リンクをスムーススクロールさせたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。