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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ