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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ