- 2008-05-12 (Mon)
- IT Tips
- Tips
- JavaScript
- ツール
- 無料･フリー
Category :
Tags :
ページ内リンク移動をスムーズなスクロールで移動
SmoothscrollこのJavaScriptを適用させると、ページ内リンク先への移動を瞬時に移動させるのではなく、滑らかな動きで移動させることができるサイトをカッコ良くさせるひとつの手法です。上記サイト内でもサンプルはありますが、私のブログでも「Page Top」が各所ありますので、実際にクリックしてみてください。
適用方法は以下の通りです。
１．上記リンクのSmooth scrollingへアクセス
２．サイト内から「smoothscroll.js」リンクをクリックしダウンロード
３．smoothscroll.jsをブログにアップロード
４．以下を <head>～</head> 間に記述
smoothscroll.jsの簡単カスタマイズ
１．メモ帳などのテキストエディタで編集
２．142行目の「ss.STEPS = 数字;」を確認
３．数字を編集しスクロールスピードを調整
※数値が低いほど高速スクロールになります
SmoothscrollこのJavaScriptを適用させると、ページ内リンク先への移動を瞬時に移動させるのではなく、滑らかな動きで移動させることができるサイトをカッコ良くさせるひとつの手法です。上記サイト内でもサンプルはありますが、私のブログでも「Page Top」が各所ありますので、実際にクリックしてみてください。
適用方法は以下の通りです。
１．上記リンクのSmooth scrollingへアクセス
２．サイト内から「smoothscroll.js」リンクをクリックしダウンロード
３．smoothscroll.jsをブログにアップロード
４．以下を <head>～</head> 間に記述
<script type="text/javascript" src="/file/scroll.js"></script>※赤文字はサイト環境にあわせる必要がある場合、編集くださいsmoothscroll.jsの簡単カスタマイズ
１．メモ帳などのテキストエディタで編集
２．142行目の「ss.STEPS = 数字;」を確認
３．数字を編集しスクロールスピードを調整
※数値が低いほど高速スクロールになります
スポンサーサイト
- Next Entries : 「第17回 ソフトウェア開発環境展」に行きました
- Prev Entries : Shadowbox応用：Webページに実装させる
Comments:0
Trackback+Pingback:1
- TrackBack URL for this entry
- http://blackcat13numbers.blog31.fc2.com/tb.php/197-db569ee9
- Listed below are links to weblogs that reference
- Smoothscroll：ページ内リンク先への移動を滑らかにスクロール from TRASH
- Trackback from 福岡で未経験からＷＥＢデザイナーを目指す沖縄人 2009-04-15 (水) 18:05
-
javascriptのsmoothscroll（スムーススクロール）の設置について
初心者にオススメのjavascriptは僕が思うにsmoothscroll（スムーススクロール）です。 簡単に説明するとサイトの一番下によくある「ページの先頭へ... (more…)