エグウェブ.JP@オンライン/WEB講座・セミナー・WEB分析

WEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やオンラインセミナーを開催中!

WordPressでスムーズスクロールさせる方法(プラグイン)|Easy Smooth Scroll Links

time 2018/01/08

<a href=”#NAME”>

<a name=”NAME”>

でページ内の特定の位置に移動させる時に、クリックした瞬間にそのNAMEの場所に瞬間移動する動作が気持ち悪いなあと思っていたので、スムーズスクロールさせる方法はないかな?と思っていたら方法がありました。

①functions.phpに書き込む

/* jQuery.js
wp_head(); で WordPressの jQuery を読み込む? */
function load_script(){
wp_enqueue_script('jquery');
}
add_action('init', 'load_script');

<?php wp_head(); ?> の後

<script>
//スムーズスクロール
jQuery(function(){
jQuery('a[href^="#"]').click(function() {// # クリック処理
var speed = 400; //スクロール速度ミリ秒
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>

参照

 

 

②プラグインを使う

Easy Smooth Scroll Links

 

プラグインで一発でした!

 

インストールして有効化したらすぐにスムーズスクロールになります!

 

PHPをいじらなくてもあっという間に実現できるなんてプラグイン様々です!

ありがとうございます\(^o^)/

download(ダウンロード)

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー