スクロールアニメーションでページ内リンクをゆっくり移動させるスクリプト


こんにちは、本日はページ内リンクでのアニメーションについて紹介したいと思います。
ホームページのリンクでは、ページ毎に移動するためのリンクと、ページ内のある場所に移動するためのページ内リンクというものもあります。
以前、ページ内リンクについてこちらで書いたので読んでみて下さい
ページ内リンクを有効活用。デザイン・活用方法を事例で紹介。 | 大阪のホームページ制作会社YCOM

ページ内リンクは、例えばこのようなところで使われたりしています。

ページ内のコンテンツへのナビゲーション
GIF 2021-07-09 9-42-18
ページトップ戻るためのボタン
GIF 2021-07-09 9-45-54

ページ内リンク

ページ内リンクは、一般的に次のな書き方で使います。

<a href="#anchor">このリンクから</a>
 
<section id="anchor">
    ここへジャンプする
</section>

リンクにはクリックしたときにジャンプする先のIDを、ジャンプする先にはタグを使ってこのように着地点を設定しておきます。
これで、リンクをクリックすると設定した要素の場所まで移動することができるんですが、
下のサンプルを触ってもらうとわかるように、デフォルトの状態だとリンクをクリックすると瞬時に到達点に移動してしまいます

See the Pen
by Yoshimune (@hachidaime)
on CodePen.


何の前提情報もない状態でクリックすると、瞬時に移動することで何が起こったのかよくわからないですし、どこに移動してきたのかわからないため戻る場所を探すのも難しく迷子になりがちです。
ページ内リンク使って移動したことがわかりやすいように、ページ内リンクの移動アニメーションさせてみましょう。

ページ内リンクのスクロールアニメーション

ページのスクロールアニメーションは、既にたくさんのスクリプトが出ていますので、イチから作る必要はないでしょう。
今回は、弊社で実際に使っているスクリプトを紹介します。
いろいろと同じようなスクリプトは配布されていて、どれを使えばいいか迷うかもしれませんが、複雑な処理をしているわけではないのでどれを使っても同じです。
弊社では、実際にお客さんのホームページでこのスクリプトを使って納品していますので、今回紹介する方法で全然問題ないかと思います。
まずは、jQueryを読み込ませましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

次に、フッターあたりに次のコードを入れます

<script>
$(document).ready(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		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;
	});
});
</script>

スクロールのスピードは

var speed = 500;

の部分で変えることができます。

See the Pen
ページ内リンク
by Yoshimune (@hachidaime)
on CodePen.

このように、移動に動きが出てアニメーションの方が確実にわかりやすい表現となっています。

こういったものは全ページで使うことになると思うので、
上記のスクリプトを「scroll.js」などのファイルとして保存して、

<script src='./scroll.js'></script>

などとして呼び出す方がいいですね。

まだ自分のホームページに設置していないという事は簡単ですのでぜひ設置してみてください。

[RelService] [Service]