同一ページ内リンクをスムーズにスクロールさせるには、この設定を!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

 姉妹サイトの『プレゼントワインショップ』でもしていることなのですが、『生まれ年ワインショップ』でもページ内リンクが、パッと飛ぶのではなくスムーズにスクロールさせたいと思いました。

ページ内リンクをスルスルとスムーズにスクロールさせる

 初期設定では、ページ内リンクはパッと飛んでしまいますが、以前設定したページトップへのリンクボタンはスクロールしますね?この設定を調べたら、余分なものをアップする必要がなかったのかもしれませんでしたが、調べる時間よりは、『プレゼントワインショップ』と同じようにするほうが早いので、調べていません。

 さて、結果からいうと「ページ内リンクをスマートにする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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

プレゼントワインショップ

ワインをプレゼントしたいけど、どれを贈ればいいか分からない方へ。接客のプロ“ソムリエ”による日本初のプレゼント専門ワインショップです。即日発送の相談可!大切な記念日、特別な日の為の本当に喜ばれる美味しいワインのみお薦めしています^^

プレゼントワインショップへ

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください