ページのスクロールをスムースにする



ページのスクロールをスムースにしたいときの管理人メモ
忘れてしまうので…。

以下全部を<head></head>内へ記載
<link rel="stylesheet" href="./css/lightbox.css" type="text/css" media="screen" />
<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="./js/jquery.smooth-scroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('a').smoothScroll({
speed: 1000,
easing: 'easeInOutCubic'
});

$('.showOlderChanges').on('click', function (e) {
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});

(function () {
})();
</script>

以上のcssとjavascriptは

lightbox.css
jquery-1.7.2.min.js
jquery-ui-1.8.18.custom.min.js
jquery.smooth-scroll.min.js
よりダウンロード

ページの一番下に
<a href="#head">ページTopへ戻る</a>というリンクを作ってOK
もちろんページ内の上部にid="head"というタグが存在しなければ無効

記事id:775 / 3425PV

関連記事