姉妹サイトの『プレゼントワインショップ』でもしていることなのですが、『生まれ年ワインショップ』でもページ内リンクが、パッと飛ぶのではなくスムーズにスクロールさせたいと思いました。
ページ内リンクをスルスルとスムーズにスクロールさせる
初期設定では、ページ内リンクはパッと飛んでしまいますが、以前設定したページトップへのリンクボタンはスクロールしますね？この設定を調べたら、余分なものをアップする必要がなかったのかもしれませんでしたが、調べる時間よりは、『プレゼントワインショップ』と同じようにするほうが早いので、調べていません。
さて、結果からいうと「ページ内リンクをスマートにするsmoothScroll.js」（株式会社トゥーアール 西畑一馬氏）にあるsmoothScroll.jsをダウンロードして、生まれ年ワインショップに設置し、WelcartBasicのheader.phpで呼び出すだけです。
まず、上記ページへ行き、smoothScroll.jsをダウンロードします。続いて、WelcartBasic-ChildのフォルダのjsフォルダにsmoothScroll.jsをアップします。あとは、header.phpの
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<?php wp_head(); ?>
のすぐ後ろに
<!--スムーススクロール用-->
<script type="text/javascript" src="https://umaredoshi-wine.jp/wp-content/themes/welcart_basic-child/js/smooth.js"></script>
<!--スムーススクロール用（終了）-->
と入れました。すると、スルスルとスムーズにスクロールしてくれます！気持ちいい～＾＾
お願い
検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m
コメント