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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ