JQuery（JavaSrcript）でページ内リンクをヌルっとスクロール(スムーススクロール)させる方法

こんにちは！シミダイ(@shimidai2100)です。

Webページでヌルっとボタンを押すと、ヌルっと動くサイトありますよね？

仕事でちょこっと必要になって作成したので注意点も含めて記事にしたいと思います。

Contents

1 ディレクトリ構成
2 HTML記述内容（index.html）
3 JavaScript記述内容（smoothscroll.js）

ディレクトリ構成

よくブログ等で公開しているのは、HTMLファイルに直接記載させる例がおおいのですが、

今回は↓のようにHTMLとJavaScriptを別ファイルに分けます。

SampleSite/
|
|--js/
|  |--smoothscroll.js
|
|--index.html

SampleSite/

|--js/

| |--smoothscroll.js

|--index.html

index.html（ページ本体）
smoothscroll.js（スムーススクロールの動作を制御する）

HTML記述内容（index.html）

まずメインのindex.htmlを用意します。

「<a href=”#〇〇”」でスムース先を指定、「id="#○○"」にスムースさせたい場所を記述します。

<!DOCTYPE html>
<html>
<head>		
<!--JQueryのライブラリをロード-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!--作成したJavaScriptをロード-->
<script type="text/javascript" src="js/smoothscroll.js"></script>
</head>
<body>
<!--helf="#○○"にスクロール先を記述-->
<a href="#smoothscroll">↓スムーススクロール</a>
<!--#○○の値をのidに記述-->
<div id="smoothscroll">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="#smoothscroll">↓スムーススクロール</a>

</body>

</html>

↓のJQueryのロードはHTMLファイル内で一番先に行う必要があるので注意してください。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

1	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

idを指定すれば<div>タグ以外でもスムースさせることが出来ます。

注意は「JQuery」の「slim」版では動作しないので注意してください。

「min」版では正常に動くので安心してください。

slim版は以下のようにファイル名に「slim」が入っています。

https://code.jquery.com/jquery-3.2.1.slim.min.js

他にも「Ajax」の機能もslim版には入っていないので注意してください。

JavaScript記述内容（smoothscroll.js）

スムーススクロールさせるための「smoothscroll.js」の記述内容は↓になります。コピペでOKです。

$(function(){ 
$('a[href^="#"]' + 'a:not(".carousel-control")').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; 
});
});