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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ