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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ