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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ