【コピペで解決】ページ内で目的のリンクまでスクロールさせる方法

どうも、たけし(@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の3系を用いています。

jQueryには1,2,3系と異なる系統があり、
違う系統を一緒に<head>内にいれてしまうと
それぞれの動作に影響が出ることがあります。

なのでできれば、
系統は揃えたほうが無難です。

動かない場合は、
そこをチェックしてみてください。

 

ではでは!

 

The following two tabs change content below.

山下毅

大学卒業後、就職に失敗し、職人を経てwebデザインを独学。その後4ヶ月で独立。 LPの制作実績は50本近く。情報商材や物販、セミナー集客のweb制作を担当。 現在はデザインに加え、コピーライティングと広告運用スキルを仲間たちと習得中。 生き辛さを抱えながらサバイブしてきた経験から、 webデザイナーが生きやすくなるライフスタイルを広めるべく、情報発信中💡

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA