問題
ページ内リンクをスクロールでなめらかに移動させるには？
解決策
jQueryのクリックイベントを用いて、リンク先のIDのタグの位置「offset().top」までanimateで移動させる。
ページ内リンクの挙動のカスタマイズ
ページ内リンクをクリックした際の挙動は、突如そのリンク先に移動します。
これをスクロールでなめらかに移動させる方法をご紹介します。
- ※今回は固定している上部バーをクラス「topbar」と定義します。
DEMOはこちら
javascriptの構築
aタグのhrefが#から始まっているものに対して、クリックイベントを行います。
// #で始まるアンカーをクリックした場合に処理
jQuery('a[href^=#]').click(function() {
// スクロールの速度
var speed = 1000; // ミリ秒
// アンカーの値取得
var href= jQuery(this).attr("href");
// 移動先を取得
var target = jQuery(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});- hrefからリンク先のタグの情報を取得し、そのタグの位置「offset().top」を取得します。
- bodyタグ、htmlタグに対し、animateを用いてその位置まで移動させます。
参考
【福島県郡山市のホームページ制作、Web制作 Kyasper Web Design キャスパーウェブデザイン » jQuery とっても簡単、ページ内リンクでスムーズスクロール】
http://kyasper.com/jquery-tips/
コメント