同じページ内をスムーズに移動させたい!

jQueryは同じページ内をスムーズに移動させることも簡単です!

以下のサンプルと解説を参考にしてください。







$(function(){
    $("a#start").click(function(){
        var pos = $("a#goal").offset().top;
        $('html,body').animate({scrollTop: pos}, "fast");
    });
});





スタート











通過











通過











通過











ゴール















































解説

id属性に”start”を持つaタグがクリックされたときに処理を実施する。
その処理とは、まずid属性に”goal”を持つaタグの表示位置を取得し変数pos
に代入します。
その次に、htmlタグとbody要素に対してanimate()メソッドを使用して、scrollTop
を先ほど取得したid属性が”goal”のaタグの位置まで画面が移動します。

$("a#start").click(function(){
    var pos = $("a#goal").offset().top;
    $('html,body').animate({scrollTop: pos}, "fast");
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>