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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ