前提・実現したいこと
現在wordpressで簡単なHPを作成しております。
トップページにいくつかのコンテンツがあり、メニューの項目をクリックすると対応したコンテンツへスクロールするといった形を目指しています。
基本ペライチなのですが問い合わせフォームや新着情報などもありますので、それらの下層ページからもトップページのコンテンツへのリンクをスムーズに行えるようにしたいです。
またヘッダーが追従するようになっているので、ヘッダーの高さ分ずらせるようにもしたいです。
発生している問題・エラーメッセージ
wordpress内のメニューのカスタムリンクに「#hoge」といった形で仕込むとうまくスクロールするのですが、それだと下層ページから遷移できません。
該当のソースコード
下記ページを参考にしました。
https://125naroom.com/web/3476
<script> jQuery(function(){ var headerHeight = jQuery('header').outerHeight(); var urlHash = location.hash; if(urlHash) { jQuery('body,html').stop().scrollTop(0); setTimeout(function(){ var target = jQuery(urlHash); var position = target.offset().top - headerHeight; jQuery('body,html').stop().animate({scrollTop:position}, 500); }, 100); } jQuery('a[href^="#"]').click(function(){ var href= jQuery(this).attr("href"); var target = jQuery(href); var position = target.offset().top - headerHeight; jQuery('body,html').stop().animate({scrollTop:position}, 500); return false; }); }); </script>
試したこと
下記プラグインなども試してみましたがうまくいきませんでした。
https://www.hiskip.com/wp/plugin/ui/screen-scroll/22269.html
下記ページを参考に「$(window).on('load'」などをつけてもみましたがうまくいかず…
https://techmemo.biz/javascript/jquery-smooth-scroll-otherpage/
補足情報(FW/ツールのバージョンなど)
使用しているテーマはTCDのSwitchです。
https://tcd-theme.com/tcd063
まだ回答がついていません
会員登録して回答してみよう