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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ