【Labs】jQueryでスムーズスクロール
こんにちは(・∀・)
今回はjQueryを使用したスムーズスクロールのサンプルをご紹介します。
jQueryでスムーズスクロール
a要素のhrefの最初の文字が「#」で始まる内部リンクをスムーズにスクロールさせます。
Google Hosted LibrariesからjQuery 1.x snippetを<head>
内に読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
HTML
<a href="#hoge">Go to hoge</a><!--リンク元-->
<div id="hoge">hoge</div><!--リンク先-->
JavaScript
$(function() {
//移動するスクリプト
$('a[href^="#"]').click(function() {
var href= $(this).attr('href');
var target = $(href == '#' || href == '' ? 'html' : href);
var position = target.offset().top;
$('html,body').animate({scrollTop: position}, 500, 'swing');
return false;
});
});