【Javascript】ページ内でスムーススクロールさせる方法
この記事は分で読み終わります。
どうも、たけし（@t_0203_)です。
今回は、
「スムーススクロールを使って
ページ内リンクに
ぬるっとジャンプさせる方法」
をお伝えしていきます。
今回はLPを想定して作成しますが
カンタンに応用できるので
是非試してみてください！
スムーススクロールとは
その名の通り、
スムースにスクロールする
Javascriptの動作です。
このページ内でいうと、
今右下にあります
「TOPに戻る」のボタンです。
さっそくページ内リンクにジャンプ!!
準備として、まずはボタンを
<a>タグで囲みます。
飛び先にはIDをつけてあげたいので
こんな感じで良いでしょう。
<a href="#form">
そして、ターゲットには
<a>タグに書いたのと同じIDを
付与してあげます。
<div id="form">
こんな感じでOKです。
このまま保存しても
ちゃんと飛ぶのですが
スムーズではありません。
ここからJSを書いていきます。
スムースにジャンプするためのJavascript
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<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;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
これを、</head>タグの直前に
入れると良いです！
これでぬるっと動くようになります！
動かない人へ
このコードにはjQueryの３系を用いています。
jQueryには１，２，３系と異なる系統があり、
違う系統を一緒に<head>内にいれてしまうと
それぞれの動作に影響が出ることがあります。
なのでできれば、
系統は揃えたほうが無難です。
動かない場合は、
そこをチェックしてみてください。
ではでは！
The following two tabs change content below.
山下毅
大学卒業後、就職に失敗し、職人を経てwebデザインを独学。その後４ヶ月で独立。
LPの制作実績は50本近く。情報商材や物販、セミナー集客のweb制作を担当。
現在はデザインに加え、コピーライティングと広告運用スキルを仲間たちと習得中。
生き辛さを抱えながらサバイブしてきた経験から、
webデザイナーが生きやすくなるライフスタイルを広めるべく、情報発信中💡
最新記事 by 山下毅 (全て見る)
- 相談に対するこちらの姿勢について - 2019年12月18日
- 実はもう、理想の生活手に入れてたっぽい - 2019年12月18日
- 【早く気付いて】承認欲求を満たす行動で、あなたは大損こいてます。 - 2019年12月18日
