- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
トップページのメインビジュアルにある「Scroll」ボタンについてご相談です。
【やりたいこと】
このScrollボタンをクリックしたとき、ページ内の任意のセクション(たとえばページの下部にある「会員マイページ」など)までスムーズにスクロールさせたいです。現状はスクロールボタンを押しても直下にしかいかないです。
【現状】
- SWELLデモに元々あったスクロールボタンをそのまま使っています(カスタムHTML等で新たに設置したものではありません)
- 「会員マイページ」セクションには `id="scrolltarget"` を設定済み(見出しh2にHTMLアンカーで付与)
- WPCodeで以下のJavaScriptスニペットを有効にしましたが、動作しませんでした:
```javascript
document.addEventListener('DOMContentLoaded', function () {
const btn = document.querySelector('.p-mainVisual__scroll');
const target = document.getElementById('scrolltarget');
if (btn && target) {
btn.addEventListener('click', function (e) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth' });
});
}
});
【質問】
このSWELL既存のスクロールボタンを使って、ページ下部の任意セクションまでスムーズスクロールさせる方法はありますか?
よろしくお願いいたします。
Akismet Anti-Spam
All-in-One WP Migration and Backup
Customizer Export/Import
Hello Dolly
Loco Translate
Paid Member Subscriptions
Profile Builder
Site Kit by Google
WP Multibyte Patch
WPCode Lite
メインビジュアルの「Scroll」はSWELLテーマ標準の scrollToContent() 関数を呼び出す仕様になっています。
この関数は「#main_visual の直後の要素」にスクロールするように定義されているため、
任意のページ内リンク(例:#scrolltarget)に直接スクロールすることはできないようです。
「」はOFFにしていただいて
独自にスムーススクロールするボタンを設置いただくほうがよいと思います。
WordPressに関するご相談・カスタマイズのご依頼を受け付けています。
✅カスタマイズのご依頼はココナラからも可能です
https://coconala.com/services/1523499
✅直接のご相談・お問い合わせはこちらから
https://smbitjp.com/contact/
メインビジュアルのScrollボタン(p-mainVisual__scroll)からdata-onclickを省いたうえでスクリプトを追加すると実現できます。swl_parts__scroll_arrow関数内で出力コードを定義しましょう。
一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。
@swell_mania すごい!!フォローありがとうございます!
WordPressに関するご相談・カスタマイズのご依頼を受け付けています。
✅カスタマイズのご依頼はココナラからも可能です
https://coconala.com/services/1523499
✅直接のご相談・お問い合わせはこちらから
https://smbitjp.com/contact/
動画とともにご丁寧に解説いただき、ありがとうございます!
ご指摘いただいた `data-onclick` の削除処理と `scrollIntoView` の書き換え、
まさに自分のケースにぴったりで、無事に希望の位置までスムーズに移動できました🙌
貴重なお時間を使ってご対応くださり、本当にありがとうございました。
また何かありましたらぜひご相談させてください。