はじめに
今回は、ページないリンクをクリックした時に滑らかにスクロールするように設定してみました。
これを機に、このサイトでも目次の各項目をクリックした際も滑らかにスクロールするように設定してありますので、試しにクリックしてみてください。
今回はjQueryによる方法、CSSによる方法の2通りを調べましたので紹介させていただきたいと思います。
関連する過去記事
下に示させていただきましたが、以前に書いたこの記事ではてなブログにおいてjQueryを利用するに上での前準備を行いました。
まだはてなブログ上でjQueryを動かしたことがない方は、ご参考にしていただけましたら幸いです。
手順
以下にjQuery及びCSSのソースコードを示させていただきますが、このソースコードを記述する場所は大きく分けて２つあります。
- 記事に直接記述する
- headタグの内容として記述する
前者の「ページ内に直接記述する」方法では、記事単体がそのソースコードの対象になります。
一方、後者の「headタグの内容として記述する」方法では、ソースコードの内容がそのサイト内の全ての記事に対して働きます。
用途に応じて使い分けると良いでしょう。
jQueryで実装する方法
jQueryで実装する場合は以下のコードを記述することによって、ページのスクロールの動作を滑らかにすることができます。
ソースコード
<script type="text/javascript">// <![CDATA[
$(function(){
$('a[href^="#"]').click(function(){
let speed = 100;
let href= $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
// ]]></script>少し複雑なコードになり、解読には少々慣れが必要のようです。
私自身も完全には理解してはいません。
4行目に
let speed = 100;
というコードがあります。
ここの数字を変更することで、スクロールのスピードを変えることができます。
上のコードを例に取ると、値が100に設定されているので0.1秒かけてページがスクロールします。
なので1000で1秒、5000で5秒といった具合です。
数値が小さいほど動きが早くなります。
CSSで実装する方法
次はCSSで実装する場合です。
下のソースコードを記事、またはheadタグの中に記述することで、ページのスクロールが滑らかになります。
ソースコード
<style>
html{
scroll-behavior: smooth;
}
</style>一目瞭然ではありますが、jQueryと比べるとコードがものすごく単純です。
CSSで実現する場合、あくまでデザインとしての動きになるので、細かい設定までは手をつけることができないようです。
その反面、とても分かりやすいの「とりあえずスクロールを滑らかにしたい」という時には役に立つと思います。
最初は上のCSSを記述しておいて、慣れてきたらjQueryやJavaScriptを用いて細かい動きまで設定するということも名案かもしれません。
私もこの記事を書いている現在ではこのCSSでスクロールの動きを実現しています。
スピードは体感で0.2秒といったところでしょうか。
実際にこの記事の目次の欄から試してもらうと分かりますが、ちょうどいいスピードでスクロールしてくれているので、しばらくはこのままでもいいかもしれないです。
最後に
今回は目標の１つにしていた、「目次からページ内リンクに移る時に滑らかに動作させること」を達成することができました。
この動きを付け足すだけで、かなりサイトにも面白さが増したような気がします。
上で紹介させていただいたソースコードを<head>タグ内に記述することで全ての記事にこの動きが追加されます。
私にとってはこの動きを取り入れることができただけでもかなりの収穫でしたが、まだ機になる点があります。
それは、「任意の記事に<head>で記述したコードの動きを変更することは出来ないものか」ということです。
要は、「任意の記事だけ滑らかに動かないようにしたり、動く速さを変えられないものか」ということになります。
スクロールのスピードに関しては特定の記事だけスピードを変更するようなことはないと思います。
しかし、これから様々な動きをサイトに取り入れていく上で、特定の記事だけ動きを変えたいということが出てくるかもしれません。
また気が向いた時に調べてみることにしましょう。
方法を見つけたらこの記事にもその旨を書き残しておきます。
参考記事
今回は下で紹介させていただいた記事にあるソースコードをほとんどそのまま拝借した形にはなりました。
しかし、これから様々な仕様を取り入れていく中で理解を深めていけると思います。
以上、最後までありがとうございました。
コメント
Fantastic items from you, man. I have keep in mind your stuff previous to and you’re just extremely fantastic.
I really like what you have bought right here, certainly like what
you are saying and the way through which you are saying it.
You’re making it entertaining and you continue to care for to keep it
smart. I cant wait to learn far more from you. That
is really a tremendous web site.