ページ内リンクを滑らかにスクロールするJavaScript

メルです。

今日は、SmoothScroll.jsの紹介です。

このブログにも付いていますが、
ページ内リンクを滑らかに移動させる
JavaScriptライブラリです。

賢威だとページの右下に「このページの先頭へ」というのが
ありますが、これをクリックすると滑らかにページ上部に移動しますよね。

この機能を簡単に実装できてしまうのがSmoothScroll.jsです。

まずは サンプル をご覧下さい。

 

 

SmoothScrollの実装方法

Ajaxのライブラリではないので実装が非常に簡単で
手軽に使う事ができます。

無料で公開されていますのでまずはこちらから
ダウンロードしてください。

 

設置は簡単で、smoothScroll.jsを実装したいページで取り込むだけです。

具体的には以下のタグをhead内に記述するだけです。

 

<script src="smoothScroll.js" type="text/javascript"></script>

 

後は、移動させたい要素へリンクを張るだけ。

 

<a href="#header">ページの先頭に移動</a>

 

たったこれだけで実装できてしまいます。

 

 

特定の要素のみスムーズさせない方法

■HTML5

カスタムデータ属性「data-tor-smoothScroll」に対して
「noSmooth」を指定することでスムーズを抑制することができます。

 

<a href="#header" data-tor-smoothScroll="noSmooth">スムーズなし</a>

 

■HTML5以外

smoothScroll.jsの14行目を以下のように変更します。

 

var attr ="data-tor-smoothScroll";

 ↓ ↓ ↓

var attr ="class";

 

こうする事により、class属性に対して「noSmooth」を指定し、
スムーズを抑制することができるようになります。

 

 

この投稿は役に立ちましたか? 役に立った 役に立たなかった

 

ネットビジネス速報メールマガジン

 

メルのネットビジネス速報では、悪質高額塾などの被害が拡大しないように
新しい悪質販売者の情報が入り次第、速報でお伝えいたします。

Dreamweaver、Fireworks、PhotoshopなどのTipsやチュートリアルの紹介、
最新SEO情報、その他ネットビジネスに関する情報をいち早く配信しています。

お名前(必須)
メールアドレス(必須)

記事「ページ内リンクを滑らかにスクロールするJavaScript」にコメントを残す

*

サブコンテンツ

危険な高額塾

タグ

クラウド変換 レンタルサーバー インペリアルゴールド ムーバブルタイプ 自己アフィリ followmatic Ban Hammer 北川 雅嗣 セキュリティ カスタマイズ WEB 山下 Favicon 特定のメールアドレス 滑らか 切り抜き moza MovableTYpe 出店料 ブラシ 改ざん CS5 スマホ Extension Manager タスクバー ワードプレス Windows Tiger-Wing 大園転売塾 秀吉塾天下統一 定型文 大園麗花 ECサイト アクセスアップ ファビコン ハート がら空きビジネス もざ デスクトップ 中山秀人 ブルートフォースアタック 球体 マルウエア ネットゲーム 無断送信 バイドゥー ユーチューブマニアクス2017 explorer Google Maps アイコン 優先順位 RMT system 管理画面 RSS Includes Pages HTML4.0 SyntaxHighlighter 高額塾 不正アクセス css SKナレッジ twitter PPC High Concept Marketing 久積篤史 宮田麗花 コピーボタン MasterCollection パズル functions.php ブロック バックアップ 伊藤虎太郎 シャンプー Chrome 個人情報 グラデーション フレンドシップメール ping トレンドアフィリエイト Baidu 切抜き 日本語入力変換ソフト 株式会社WINGOOD 感染 google Internet Explorer 大西良幸 LinkShaker tool MT トレンドキーワード SEO クリックランキング タイガーウイング 権利収入 リンクシェイカー PHP IE Login LockDown 新井浩 土屋ひろし XHTML 株式会社SRシステム 副業術 レタープレス レビュー メモ Adobe SmoothScroll.js CS6 ヤフー トラフィック .htaccess ランキング 池田純矢 ブロックポリシー KMSpico ネットビジネス大全集 バイマ やしろひろたみ BBIZ 自己アフィリエイト アンダーグラウンドアフィリエイトクラブ 個人情報流出 村上省吾 ネットショップ レイアウト Firefox ブラクラ Diamond Affiliate Masters Program 株式会社バンザイ ヤフオク エキスパートメール RSS アレックス式ネオせどりスクール ネットビジネス wp-login.php 加藤 秀吉 伊藤 虎太郎 人物 force puzzle 特権ビジネス FireWorks レイアウト崩れ アフィリエイト IP テーマ 放射線 石井匠 無料 不労所得の神 ボタン アクセス制限 Yahoo 掲示板 ツイッター 流出 ウイルス Windows 7 ドメイン フォローマティック 81a338 DTD 申請金ビジネス IBS ロリポップ getElementByTagName 上位表示 背景 改竄 アドセンス 画像 Google Maps API 関根塾 Thunderbird アフィ匠 大園式転売塾 株式会社A-ブログレス エクスチェンジ 短縮URLツール android メルマガ配信システム wordpress Youtube スタイルシート ネットビジネス最後の楽園 詐欺組織 クラウド入力機能 クラック ヤフーショッピング JavaScript YouTube Maniax 2017 BUYMA インターネット 短縮URL 高速ゲーム スクロール やしろ塾 プロモーション ウインドウ エディタ プロファイル エクスプローラー DOCTYPE html 詐欺 表示 株式会社Free Agent Style 自動化 クロスアフィリエイト 量産 Newpost Catch 蝶乃舞 テンプレート ping送信 ビジネス 関根義光 ライン ライオンアフィリエイト 比較 与沢翼×蝶乃舞 インターネットビジネススクール アンダーグラウンドメソッド ソフト サンタ ざくざく君 伊藤塾 ぼかし WP 管理ツール iphone スカイプ 与沢翼 加工 転売大園塾 音量アイコン wpXサーバー 復元 百度 アレックス 無料オファー 配布 CGI 原田真 ライブチャット 秒速で1億円稼ぐ男 インフォトップ せどり 既得権益 モザイク 賢威 Cash on Wordpress マイクロソフト Wordpress Content Slide 脆弱性 getElementById FTP 自動 登録禁止 document.all postpost ネットガレージ 株式会社SRシステム KMS認証 三橋美仁 不正送信 情報商材 ソース 株式会社ニュース Line 到達率 ネオヒルズアカデミー office 小笠原健一 マニュアル 伊藤 歩 サイト改ざん EC ソースコード インターネットエクスプローラー 固定ページ スムーズ ツール プラグイン 立体 ブラウザ Agency Business バナー @PAGES

アーカイブ

エステトラブル

このページの先頭へ