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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ