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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ