目的

jqueryを用いて画面をスクロールさせるボタンを実装します。
基礎の復習も兼ねてかなり初歩的な部分も調べつつまとめています。

まずは完成形から

HTMLにてボタンを配置

<!--スクロールしたい範囲-->
<div class="contents">
</div>

<!--スクロール機能を持たせる要素-->
<div class="scroll_btn">
</div>

jsファイルに処理を記述

$(function(){
  $(".scroll_btn").on("click", function(){
    $(".contents").animate({scrollTop: $(".contents")[0].scrollHeight}, 500, "swing");
  })
})

jsファイルそれぞれの記述について

$(function(){...})

$(function(){
  //処理したい内容
})

この部分は、
「HTMLの読み込みが全て完了したら、以下の処理を実行しますよ」
という宣言のようなものです。

以下の例のように、javascriptファイルはHTMLのhead要素の部分で読み込みが行われます。

<!DOCTYPE html>
<html>
<head>
  <title>タイトル</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

しかし、実際にjavascriptで処理を行いたい部分は
大抵、head要素より下のbody要素の中にあるかと思います。
HTMLは上から順番に読み込むので、順番通りjavascriptファイルが先に読み込まれても、
javascriptファイルにて指定しているHTMLの要素が
まだ認識されていないことになります。

そのため「$(function(){...})」の記述による
「HTMLが全て読み込まれてから」宣言が必要になってくるというわけです。

発火条件の指定（HTML要素を指定し、そこで何が起きるとイベントが発火するか）

//$(function(){
  $(".scroll_btn").on("click", function(){
    //$(".contents").animate({scrollTop: $(".contents")[0].scrollHeight}, 500, "swing");
  })
//})

これは、
「"scroll_btn"というクラスが設定されている要素が"click"されると、
以下function(){}の処理を行います」
という意味になります。

イベントを定義する時の記述として

//$(function(){
  $(".scroll_btn").click(function(){
    //処理
  })
//})

こういう形でも問題なく動きます。
しかし、「.on()」で記述をしておいた方が
複数のイベントタイプを設定できるなどメリットが多いようです。
これについてはまた別の機会にまとめたいと思います。

処理（画面をスムーズにスクロールさせる）

//$(function(){
  //$(".scroll_btn").on("click", function(){
    $(".contents").animate({scrollTop: $(".contents")[0].scrollHeight}, 500, "swing");
  //})
//})

animate()

このメソッドを利用するオブジェクト（今回はcontentsクラスが指定されたdiv要素)が持つ
プロパティなどを徐々に変化させることができます。
今回はscrollTopプロパティを用いて、指定する高さまでスクロールする機能を持たせます。

scrollTop:$(".contents")[0].scrollHeight

contentsが入ったdiv要素のスクロールできる高さ（scrollHeight）を取得（scrollTop)します。

また、animate()の第二、第三引数で、その他スクロールに関するオプションの設定を行っています。

第二引数　500

これは「duration(アニメーションの動作期間)」を設定しています。
初期値は"normal"が設定されており、"fast"、"slow"と指定できます。
また、完了までの時間をミリ秒単位で指定することもでき、
今回の「500」であれば「0.5秒で完了する」ように設定していることになります。

第三引数　"swing"

これは「easing(値の変化の緩急)」を設定しています。
プラグインを入れずに使える値は”linear”と”swing”だけで
"linear"は一定の変化、”swing”は若干の緩急がつきます。
初期値としては”swing”が設定されているようなので、
今回の場合このオプションは必要ないですね。

終わりに

以上、スクロールボタンの実装を軸にした
jquery基本の復習でした。
もし何か誤っていることなどあれば
ご指摘いただけるとありがたいです。

【jquery】画面スクロールボタンの実装からイベント発火の基本を復習する

目的