プラグイン無しでスムーズスクロール stinger3
公開:
: 更新:2014/12/13
WordPressカスタム
スムーズスクロールはこんな感じのやつです。
ページ内リンクの動作をスムーズスクロールにする為wordpressにスムーズスクロール系のプラグインを入れた時にスクロールの動作が安定しない場合に試してみてください。（私はカクカクスクロールでした）
正直、私は素人のようなものなのでこうしたらこうなった的な内容です、あくまでもコードの書き換えは自己責任でお願いします。
外観→テーマ編集→ヘッダー（header.php）
|
45 46 47 48 49 50 51 52 53 54 |
<?php } else { ?> <meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes"> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" /> <?php } ?> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php if(is_mobile()) { ?> <!--アコーディオン--> |
上記の49・50間に下記のコードを追加。
|
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<?php wp_head(); ?> <!---スムーズスクロール---> <script> jQuery(function(){ jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 900; 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; }); }); </script> </head> |
50～63部分を追加して完了です。
私はこれでプラグインなしでスムーズスクロールできて動作も安定しています。
通常のページ内リンクのコードで動作します。
<a href=”#link1″>スムーズスクロールを体験する</a> （出発点）
<div id=”link1″>到着</div> （到着点）
２ヶ所以上使う時はlink1を変更すれば出来ます、link2でもbanban1でもponpon5でも出発点と到着点で１組になっていて他の組と同じでなければ何ヶ所でも使えます。
今回の方法は「Kyasper Web Design」（キャスパーウェブデザイン）さんのブログ記事を参考にさせていただきました。
参考記事ページ （記事内WordPressの場合～）
到着
スポンサーリンク
ad
関連記事
-
-
タグクラウドの文字サイズ調整 stinger3
stinger3のカスタムという訳ではありませんがWordPressのウィジ
-
-
追従するSNSボタンを消す stinger3
PCページに表示される追従型SNSボタンを消す （スマホページは上記現バー
-
-
WordPressのJetpack共有に追加したSNSボタンの高さを合わせる
この記事は個人的なメモです。 プラグインJetpackの更新で追加した共有ボタンの高さが合わな
-
-
スマホページにヘッダー画像を入れる stinger3
スマホページにヘッダー画像を入れる 外観→テーマ編集→smart.css
-
-
追従するSNSボタンを縦型にする stinger3
PCページに表示される追従型SNSボタンを縦型にする 外観→テーマ編集→ス
