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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ