ボタンや画像を押すと素早く目的の場所にスクロールしてくれる「スムーススクロール」。
今回はjQueryを使ったなめらかな動きのスムーススクロールのコードを紹介します。
サンプルはこちら
必要コード
html
<head>〜</head>内
jQueryの呼び出しコード
※既にお手持ちのhtmlにjquery本体を読み込んでいる場合は適宜調整してください。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</body>直前、もしくは<body>のなるべく下に
スムーススクロールの設定コード
<!--スムーススクロール-->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15.0.0/dist/smooth-scroll.polyfills.min.js"></script>
<script type="text/javascript">
// ページ内リンクのみ取得
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 500,//スクロールする速さ
});
</script>
<!--end スムーススクロール-->「speed: 500,//スクロールする速さ」
ここの500の数値を小さくするとスクロール速度が速くなります。
任意のボタンや画像にページ内ジャンプ設定
あとはいつも通り、好きな画像などにaタグでジャンプ先のidを指定します。
<a href="#page_jump">
<img src="images/sample.jpg" alt="">
</a>最後にジャンプ先には以下を入れます。
<div id="page_jump"></div>これで実装ができるかと思います。
ジャンプ先の位置を微調整したい
上のようにジャンプ先が画面の上にぴったりくっついて見栄えが悪い時は、
先程id指定した「#page_jump」にcssで以下のように設定すると良いです。
css
#page_jump{ padding-top: 70px; margin-top: -70px; }微調整をする時は二つの数字を合わせましょう。
（padding-top: 40px;にしたらmargin-top: -40px;に）