jqueryによるスムーズスクロールのメモ

まず先にjquery-3.1.1.min.jsを読み込む
<script type='text/javascript' src='http://xxxx.jp/js/jquery-3.1.1.min.js'></script>

jqueryの設定は以下
jQuery(function($){
$('a[href^="#"]').click(function() {
// クリックした要素のhref属性の値を取得
var anchor = $(this).attr('href');
// 表示位置を取得
var position = $(anchor).offset().top-20;
// アニメーションの効果の作成
$('body,html').animate({ scrollTop : position }, 500, 'swing');
return false;
});
});

<a href="#koko">#kokoというidのところへスクロールする</a>

<span id="koko">このidの付いた要素へスクロールしてくる</span>

関連記事

• イメージと文字をそろえるには
• インクルードファイルで楽しよう
• XHTMLの定型文を用意しておく
• aspxでエラーを表示させない
• 簡単なドリルダウンメニュー
• コマンドによりセレクト文を動的に変更
• サイトのオリジナルビデオを直接ダウンロードさせない
• 特定のページだけ文字コードが違う！文字化け回避
• .netのMail送信はサブジェクトが文字化けする！
• スペース区切りで絞込みのできる全文検索を実装する