JavaScriptでスムーズスクロールを実装する | Web Tips
公開日：2014年3月3日 最終更新日：2014年3月6日 ページ内リンクでページトップに戻る時に、スクロールがなめらかだとユーザーが違うページにジャンプしたと勘違いしなくてすみます。 このスムーズスクロールをJavaScriptで実装する方法を紹介します。 jQueryを使う方法 jQueryを他にも使っているなら、animate()を使ってスムーズスクロールが実装できます。 【記事執筆時の確認環境】 jQuery 1.11.0 以下はそのコードですが、#で始まるアンカーをクリックした時に動作するようになっています。 jQuery(function(){ $('a[href^=#]').click(function() { var speed = 400;//スクロール速度 単位：ミリ秒 var href= $(this).attr("href"); var destination =
超簡単なPageTopの設定方法Jquery | Jquery
PagetopのJqueryスクリプトの作成 以下のスクリプトをそのままpagetop.jsとして保存し、サーバーにアップする。 $(function() { var topBtn = $('#page-top'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); HTMLファイルとCSSファイルへの記載 HTMLファイルと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
