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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ