プラグイン無しでスムーズスクロール 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
関連記事
-
-
WordPressの投稿作成画面にタグボタン（クイックタグ）を追加する
WordPressの投稿記事を作成や編集する画面にあるクイックタグは便利ですが正直もう少し色
-
-
スマホページにヘッダー画像を入れる stinger3
スマホページにヘッダー画像を入れる 外観→テーマ編集→smart.css
-
-
ファビコンを設置しよう stinger3
ファビコンとは、 一応暗黙の決まり事なので言いますがファミコンじゃない
-
-
追従するSNSボタンを縦型にする stinger3
PCページに表示される追従型SNSボタンを縦型にする 外観→テーマ編集→ス
-
-
タグクラウドの文字サイズ調整 stinger3
stinger3のカスタムという訳ではありませんがWordPressのウィジ
