こんにちは、yutaです。
今回は、「webページ上でボタンをクリックすると指定位置まで移動するアニメーションを実装する方法」について解説します。
1.実装後(動画)
2.コード
3.スクリプト解説
3-1.特定要素の位置を取得する
3-2.クリックで指定位置に移動する
記事を読んで頂くついでにクリックもして頂けると嬉しいです笑
※別タブで開きますので記事の邪魔にはなりません。
1.実装後(動画)
実装後はこんな感じになります。今回は、ただ移動させているだけなのでアニメーション感はありませんが、jQueryの他の機能と組み合わせれば、「5秒かけて特定位置までスクロールさせる」などの動きを実現できます。
2.コード
実装後のHTMLはこんな感じ。
3.スクリプトの解説
今回の実装で重要なのはjQuery部分、つまり<script>部分なのでそこを解説していきます。
3-1.特定要素の位置を取得する
43~45行目でボタンを押した時に移動する先の「要素の位置」を取得し、変数に格納しています。
var aLocate = $('#a').offset().top;↑は、変数”aLocate”にid名”a”の要素のオフセットトップ(ブラウザのトップから要素aのトップまでのpx数)を代入しています。
要素aと言うのは今回の場合、一番最初に記述されているdivであり、これはブラウザのトップに表示されることになるので、オフセットは0pxですね。
3-2.クリックで指定位置に移動する
47~57行目でボタンをクリックした時に実行される関数を記述しており、この関数内で3-1で取得した位置にブラウザのスクロール位置を移動する命令を出しています。
47~49行目までが1つのボタンに対する命令で、それ以降は同様の命令をコピペして変数名とid名を書き換えて3つのボタンに対する命令を記述しています。
$('#bTop').click(function(){
$(window).scrollTop(cLocate);
});$(‘#id名’).click(function(){ クリックした時に実行する命令を記述 });
で、特定のid名が割り当てられた要素をクリックした時に実行する命令を記述します。47行目では、id名”bTop”つまり一番上のボタンになっているので、ブラウザの一番上に表示されているボタンをクリックした時の動作になりますね。
そしてクリック時の命令ですが、
$(window).scrollTop(変数);
で、window(つまりブラウザ画面)のスクロール位置を変数の場所に移動しています。
48行目では、変数名に”cLocate”と記述されており、45行目を見るとわかりますがcLocateには一番下のdiv(id名:c)のオフセットが格納されています。
つまり、「ボタンを押すと一番下のdivの位置までブラウザ画面が移動する」ことになります。
基本的に今回実装したもののロジックは以上になります。2つ目、3つ目のボタンの動作も上記と同様に記述できます。
というわけで今回は以上になります。では、また！
