皆さんこんにちは！今晩は！！ロト君です。今回は簡単にスクロールでのhタグ遷移をプラグイン無しで作る方法を紹介します。
1.実際のコード
実際に各コードは2種類あります。
function.php側と、js側です。
まずは、js側です。
|
1 2 3 4 5 6 7 8 9 10 |
jQuery(function(){ jQuery('a[href^="#"]').click(function() { var speed = 800; var href= jQuery(this).attr("href"); var target = jQuery(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); |
続いて、WordPress側に正しくjsファイルを読み込ませます。
|
1 2 3 4 5 6 7 8 9 10 |
<?php function lotokunn_enqueue_scripts() { wp_enqueue_script( 'scroll-script', get_template_directory_uri() . '/js/scroll.js' ); } add_action( 'wp_enqueue_scripts', 'lotokunn_enqueue_scripts' ); ?> |
以上の、2種類を保存すればスムーズなスクロール遷移が出来ます！！
2.まとめ
よく、headタグに直接記載するよなサイトさんがありますが、それは間違いです。正しく、WordPressに書き込む為にはenqeueを活用しましょう！！
子テーマなどであっても、正しい表記の方が後々編集し易いです。
では、今回はここまで！(°▽°)ミ★
コメント