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

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

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

<title>smooth scroll</title>



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



<br /><br />
<a id="start">スタート</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
通過
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
通過
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
通過
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="goal">ゴール</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<title>smooth scroll</title>

$(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");
}

$("a#start").click(function(){

var pos = $("a#goal").offset().top;

$('html,body').animate({scrollTop: pos}, "fast");

}