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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ