jQuery でスクロール機能をつけてみよう -初心者にもわかりやすく解説-WordPressに適用する方法も

jQuery でスクロール機能をつけてみよう -初心者にもわかりやすく解説- WordPressに適用する方法も

今回はJavascriptのJqueryを使用してwebページにスクロールの機能を付ける方法を

ご紹介します。

　

　　

今回ご紹介するのはjQueryの記述方法3つと、Wordpressで適用する方法

・ページの高さを数字で指定して、スクロールさせる方法。

・ページ内の特定の要素を指定して、その場所までスクロールさせる方法。

・スクロールの速さを調節する方法

・WordPressで適用させる方法　

　　

それでは、一つずつ見ていきましょう。

　　　

jQuery でスクロール機能を -ページの高さを数字で指定する方法-

$(function() {
$(‘button’).click(function() {
$(window).scrollTop(300);
})　　　　　　　　　
});　　　　　　

　このような記述になります。

$(‘button’)のところにクラス名であれば、$(‘.button’)

id名であれば$(‘#button’)となります。

click(function() {

これでクリックすれば、発生するという意味です。

　

$(window).scrollTop(300);

ここで、スクロールの調節ができます。

$(window)は現在いるページ全体を指します。

scrollTop(300);　でトップから300pxの位置にスクロールする、という意味になります。

　

最下部であれば、scrollTop(9999); 　

最上部であれば , scrollTop(0); で大丈夫です。

　

()の中の数字でトップから指定したい位置までの数字を入れることで調整できます。

　　

jQuery でスクロール機能を -ページ内の特定の要素を指定して、その場所までスクロールさせる方法-

$(function()
$(‘button’).click(function() {
　var point = $(‘h1’).offset().top;
　$(window).scrollTop(point);
});
});

$(‘button’).click(function() { 　ここはさっきと同じですね、

 var point = $(‘h1’).offset().top;

ここはすこしややこしいかな

$(‘h1’)の要素をpointに指定します。

　$(window).scrollTop(point);

さっきは数字で指定したところを、要素の代わりであるpointにします。

　

以上で完了。

 

jQuery でスクロール機能 -スクロールの速さを調節する方法-

スクロールの方法は上で書いたので、次にスクロールのスピードを変更する方法を

解説します。　

jQuery でスクロール機能を -ページの高さを数字で指定する方法-　にスピード

の調節の記述を追加するとこのようになります。

$(function() {
$(‘button’).click(function() {

　$(“html,body”).animate(
{scrollTop : 300}, 1000);
})
});

１行目は同じですね、

$(“html,body”).animate(　ここが少し始めの記述違うところ

　

$(window).scrollTop(300); 　と今まではこのように記述しておりました。

今回は $(window) の代わりに $(“html,body”) を使います。

そして.animate を記述します。

　

{scrollTop : 300}, 1000);　こちらは、前半は前に解説した通りで、

1000という数字がスピードの調節に使う部分です。

ここの数字を上げれば上げるほどスクロールが早くなります。

デフォルトでは, 1000ぐらいでちょうど良いと思います。

　

jQuery でスクロール機能　 -WordPressに適用させる方法-

ではこれから今まで解説したjQueryの記述方法を、WordPressをお使いの方向けに

どのように適用させれば良いかを説明します。

　

例えば、　こちら　という文字をクリックするとスクロールする場合に、

このような記述をしたとします。

<span id=”jquery-schroll-sample” style=”text-decoration:underline; cursor:pointer;”>こちら</span>をクリックしてください。

idを”jquery-schroll-sample”と指定しています。

$(function() {
$(‘#jquery-schroll-sample’).click(function() {

　$(“html,body”).animate(
{scrollTop : 300}, 1000);
})
});

”こちら”　をクリックした場合に、トップから300px の位置に1000の速さで

スクロールする、という場合はこのような記述のなります。

　

ではWordPressのテーマエディタからJavaSriptファイルを編集していきます。

テーマエディタの右側のサイドバーの、　js フォルダを選択します。

だいたいの場合は、jQueryが入っていると思いますので、

テーマ名のjsファイルを開いて、今回紹介した記述の必要なところは変更して

一番下に貼り付ければ完了です！