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

*

サブコンテンツ

危険な高額塾

タグ

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

アーカイブ

エステトラブル

このページの先頭へ