jqueryのanimateを使ってページ内遷移をさせてみようと思います。
aタグ(<a href="#page1">)を使ったサンプルはよくみるのですが、 ここではaタグを使わずに試してみます。
サンプルページはこちら
properties:移動させる位置
duration:アニメーションする時間を「500ミリ秒」
easing:イージングの種類を「linear」
※jquery easingの種類や動きについては下記のサイトが参考になります。
http://api.jqueryui.com/easings/
※jquery animateについてはこちら
https://api.jquery.com/animate/
aタグ(<a href="#page1">)を使ったサンプルはよくみるのですが、 ここではaタグを使わずに試してみます。
サンプルページはこちら
HTMLのサンプル
ひとつめ ふたつめ みっつめ上部にボタンが3つあり、spanのボックスが3つあります。 spanのボックスの間には、間を空けるためのdivを置いてます。
JavaScriptのサンプル
$(document).on("click", "[id^='bt']", function() { //押されたボタンのIDから番号を取得します。 var button_id = $(this).attr('id').replace('bt', ''); //移動する先のDIVの位置を取得します。 var position = $('#page' + button_id).offset().top; //animateを使用して移動します。 $("html, body").animate({scrollTop:position}, 500, "linear"); });ボタンのクリックイベントを拾い、押されたボタンのIDを取得します。 ボタンのIDから移動先のspanのIDを設定して、jqueryのanimateを使用してページ内遷移させてます。
.animate( properties [, duration] [, easing] [, complete] )サンプルでは、
properties:移動させる位置
duration:アニメーションする時間を「500ミリ秒」
easing:イージングの種類を「linear」
※jquery easingの種類や動きについては下記のサイトが参考になります。
http://api.jqueryui.com/easings/
※jquery animateについてはこちら
https://api.jquery.com/animate/
0 コメント:
コメントを投稿