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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ