スポンサーサイト

  • 2016.11.28 Monday
  • -
  • -
  • -
  • -
  • by スポンサードリンク

一定期間更新がないため広告を表示しています


にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。
  • 2016.11.28 Monday
  • -
  • -
  • -
  • -
  • by スポンサードリンク

jQueryを使ったスムーズスクロール

ウェブページでページ内のアンカーにジャンプするとき、スムーズスクロールなんて技を使ってみることがあります。

スムーズスクロールを採用したサイトはこれまで何サイトか作っているのですけど、クライアントさんから指示があったもののほかは誰も気がつかないのか(笑)、よいとも悪いとも言われることはありませんでした。

でも、やっと「いいですね〜♪」と言ってくれる人がいた!!

嬉しいので、ココでも紹介しちゃいます。もちろん、このブログでも採用しています(さっき採用しました)。

実装方法はいくつかあるみたいですが、私が使った方法は、JavaScriptのライブラリー集jQueryを用いたもの。

以下のページを参考にさせていただきました。っていうか、そのままコードをコピーしています。ありがとうございます。

⇒[jQuery] ページ内をスムースにスクロールする | 広島、晴れのち晴れ

具体的には、HTMLヘッダーに以下のコードを追加します。

もちろん、ドメイン名/フォルダー名のところにjQueryのライブラリーを置く必要があります。jQueryは以下からダウンロードしてください。

⇒jQuery

ちなみに、JUGEMのブログでは以下のアドレスにjQueryライブラリーが設置されていますので、JUGEMのブログではこれを使用することもできます。
http://js.jugem.jp/jquery/1.3.2/jquery.min.js

赤字¥は、このブログではうまく表示できなかったので、半角の「¥」(バックスラッシュまたは円マーク)に直してください。

^は、唯一、引用元から修正した箇所です。引用元では*ですが、これだとよそのページにアンカーつけたリンクが有効にならないので、修正しています。

<script type="text/javascript" src="http://ドメイン名/フォルダー名/jquery.js"></script>

<script><!--
$(function(){
jQuery.easing.quart = function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(document).ready(function(){
    jQuery('a[href^=#]').click(function() {
        if (location.pathname.replace(/^¥//,'') == this.pathname.replace(/^¥//,'') && location.hostname == this.hostname) {
            var $target = jQuery(this.hash);
            $target = $target.length && $target || jQuery('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                jQuery('html,body').animate({ scrollTop: targetOffset }, 1200, 'quart');
                return false;
            }
        }
    });

});
// --></script>


↓こんな感じです。
▲この記事の真ん中あたりへ
▲この記事の最初の行へ

これまでJavaScriptはあまり使っていなかったのですが、jQueryを覚えてから、いろいろ遊んでみるようになりました。
リンク先によって<a>タグのウィンドウを制御したり、角を丸くしたりは、よく使っています。ただしIE6は不可なものもあるみたいです。
ここで紹介したスクロールは、IE6もOKのようです。

にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。

スポンサーサイト

  • 2016.11.28 Monday
  • -
  • 15:45
  • -
  • -
  • -
  • by スポンサードリンク

にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。
  • 2016.11.28 Monday
  • -
  • 15:45
  • -
  • -
  • -
  • by スポンサードリンク
<< 児童労働反対世界デー・キャンペーン2010(2010-04-08 23:08:08) | 人に指示を出すこと、人から指示を出されること(2010-04-24 04:20:27) >>
コメント
コメントする









この記事のトラックバックURL
トラックバック
お友達・パートナーリンク
登録されたブログから、最新記事10件を表示しています
Powered By 画RSS
その他リンク
Twitter
Facebook
Koji Minewaki

バナーを作成
Skype
Skype Me™!
なかのひと
あわせて読みたい
あわせて読みたいブログパーツ
recommend
recommend
sponsored links
powered
無料ブログ作成サービス JUGEM
プロフィール
プロフィール写真
⇒プロフィール
最近のコメント
最近のトラックバック
最新記事
カテゴリー
アーカイブ
カレンダー
   1234
567891011
12131415161718
19202122232425
2627282930  
<< April 2020 >>
このブログ内を検索
others
mobile
qrcode