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

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ