MENU
新型コロナウイルス感染症(COVID-19)対策のため、教室に来ての授業は全面休止しております。※オンライン講座は随時受け付けております。

スムーススクロールを実装しよう

2020 3/25
スムーススクロールを実装しよう

今回はjQueryを使用したスムーススクロール(ページ内リンクの際、クリックしたらにゅるっと動くあの動き)を実装したいと思います。

目次

jQueryってなに?

jQueryというのはJavaScriptという難しいプログラミング言語を簡単に使えるようにまとめてられているスターターキットのようなものです。

ウェブサイトを調べているとjQueryをつかって◯◯する、というハウツーが出てくるかと思いますが、その際には必ず「jQueryを読み込む」という作業を行います。

jQueryの読み込み方

あわせて読みたい
No Image
jQuery CDN
で、jQuery 3.xのminifiedを選択します。クリックするとコピーできる<script>タグのコードが表示されますので、それをコピー。
そして、HTMLの<head>内に(もしくはbody閉じタグの直前)にペーストします。

スムーススクロールの読み込み方

jQueryを読み込んでから下記を、読み込んだ下側に貼り付けてください。

<script>
$(function(){
 $('a[href^="#"]').click(function() {
      var speed = 500;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

これで、リンクがスルッと動くようになったでしょうか?
参考になれば幸いです。

この記事を書いた人

[経験]
・制作(Photoshop・Illustrator/HTML・CSS・jQuery・WordPress)
・アクセス解析/SEOライティング/運用改善/企画提案
・講師(職業訓練校/スクール/企業出向)
[活動]
大阪・東京でWeb制作を中心に活動。
また「拡げるキッカケを共創する」を活動指針として
①未来を切り開くスキル習得サポート、②自立したウェブサイト運用のアシスト、を行う。

目次
閉じる