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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ