フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
SWELLデモにあるスクロールボタンで...
 
通知
すべてクリア

SWELLデモにあるスクロールボタンで任意のセクションまでスムーズに飛ばしたい

7 投稿
3 ユーザー
5 Reactions
174 表示
(@maecli)
投稿: 3
メンバー
トピックスターター
 

トップページのメインビジュアルにある「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既存のスクロールボタンを使って、ページ下部の任意セクションまでスムーズスクロールさせる方法はありますか?

よろしくお願いいたします。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, プラグインを停止しても同じことが起こることを確認しました, デフォルトテーマ等、他のテーマでも同じことが起こることを確認しました, 自分で追加したコードに問題がないかチェック済みです, サポート範囲外だということを理解しているが助けが欲しい(有料サポートしてくれる方を探したい)
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.8.x
OS
Windows
利用中のWordPressバージョン
6.5.3
利用中のサーバー会社
ロリポップ
ブラウザ
Chrome
利用中のプラグイン一覧

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

 
投稿済 : 22/05/2025 9:47 am
くみ
(@kunimi)
投稿: 8
メンバー
 

メインビジュアルの「Scroll」はSWELLテーマ標準の scrollToContent() 関数を呼び出す仕様になっています。
この関数は「#main_visual の直後の要素」にスクロールするように定義されているため、
任意のページ内リンク(例:#scrolltarget)に直接スクロールすることはできないようです。

」はOFFにしていただいて
独自にスムーススクロールするボタンを設置いただくほうがよいと思います。

image

WordPressに関するご相談・カスタマイズのご依頼を受け付けています。
✅カスタマイズのご依頼はココナラからも可能です
https://coconala.com/services/1523499
✅直接のご相談・お問い合わせはこちらから
https://smbitjp.com/contact/

 
投稿済 : 23/05/2025 3:21 am
かんた
(@swell_mania)
投稿: 757
Https://webrent.xsrv.jp/
 

メインビジュアルのScrollボタン(p-mainVisual__scroll)からdata-onclickを省いたうえでスクリプトを追加すると実現できます。swl_parts__scroll_arrow関数内で出力コードを定義しましょう。

 

 

一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。

 
投稿済 : 23/05/2025 12:04 pm
くみ reacted
くみ
(@kunimi)
投稿: 8
メンバー
 

@swell_mania すごい!!フォローありがとうございます!

WordPressに関するご相談・カスタマイズのご依頼を受け付けています。
✅カスタマイズのご依頼はココナラからも可能です
https://coconala.com/services/1523499
✅直接のご相談・お問い合わせはこちらから
https://smbitjp.com/contact/

 
投稿済 : 23/05/2025 12:10 pm
かんた reacted
(@maecli)
投稿: 3
メンバー
トピックスターター
 

@swell_mania 

動画とともにご丁寧に解説いただき、ありがとうございます!

ご指摘いただいた `data-onclick` の削除処理と `scrollIntoView` の書き換え、
まさに自分のケースにぴったりで、無事に希望の位置までスムーズに移動できました🙌

貴重なお時間を使ってご対応くださり、本当にありがとうございました。
また何かありましたらぜひご相談させてください。

 
投稿済 : 27/05/2025 10:02 pm
かんた and くみ reacted
(@maecli)
投稿: 3
メンバー
トピックスターター
 

@kunimi 

早々にご丁寧なご対応をいただき、ありがとうございました!

丁寧にアンカー設定やJavaScriptのポイントを教えてくださったおかげで、
自分の理解も深まり、しっかり検証を進めることができました。

また何かで詰まったときは、ぜひご相談させてください🙇‍♀️

 
投稿済 : 27/05/2025 10:04 pm
くみ reacted
かんた
(@swell_mania)
投稿: 757
Https://webrent.xsrv.jp/
 

@maecli 

お役立てて何よりです。トピックを「解決済」になさってください😉

topic close

一般ユーザー
SWELL初心者のために、ブロックパターンライブラリーを運営しています。

 
投稿済 : 28/05/2025 12:07 pm
共有: