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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ