ページ内リンクを滑らかにスクロールする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」にコメントを残す

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ