2014年3月18日火曜日

jqueryの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 コメント:

コメントを投稿

要望&問い合わせ

名前

メール *

メッセージ *