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

アーカイブ

エステトラブル

このページの先頭へ