I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > jQuery > jQueryでページ内リンクをスムーススクロールさせる方法

jQueryでページ内リンクをスムーススクロールさせる方法

jQueryでページ内リンクをスムーススクロールさせる方法

先に「必ず使うページ上部に戻るスムーススクロール用jQuery」という記事を書きましたが、ページ上部に戻る時にスムーススクロールにするなら、サイト内の全てのページ内リンク(アンカーリンク)でスムーススクロールしたいですよね。

$(function(){
// #で始まるアンカーをクリックした場合に処理
    $('a[href^="#"]').click(function() {
        // スクロールの速度
        var speed = 500; // ミリ秒
        // 移動先を取得
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        // 移動先を数値で取得
        var position = target.offset().top;
        // スムーススクロール
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
});

こちらもよく使いますがいつも忘れてその度に調べるので備忘録として。

記事移動

関連記事

facebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみる

jQueryで特定のパラメータの値を取得する関数

jQueryで特定のパラメータの値を取得する関数

必ず使うページ上部に戻るスムーススクロール用jQuery

必ず使うページ上部に戻るスムーススクロール用jQuery

CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

レスポンシブ対応・スワイプ可能な多機能スライドショーjQueryプラグイン「Slider Pro」

jQueryプラグイン「Infinite Scroll」と「Masonry」を利用して無限スクロールのギャラリーを作成する方法

Comment Form

  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Restriction
Postkey
(スパム対策に、投稿キー を半角で入力してください。)

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed