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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ