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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ