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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ