JavaScript
jQuery

[jQuery] ページ内リンクの移動に、スクロールのエフェクトをかける方法

More than 3 years have passed since last update.


ページ内リンクをもう少しそれっぽくしたい

ただページ内リンクをするだけだと、瞬間移動している様で感じが悪い。

ページ内を移動している感を出したい。


実装


html

アンカーポイントにリンクを貼るだけです。

移動させたい先の、id名に#を付けてhref=に指定するだけ。

<a href="#hoge">下へ移動</a>


jQuery

まずはjQueryを呼び出す。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/{version}/jquery.min.js"></script>

次にスクリプトを記載。

$(function(){

$('a[href^=#]').click(function(){
var speed = 500; //移動完了までの時間(sec)を指定
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});

これだけでなんとか出来ました。


参考

http://klutche.org/archives/536/