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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ