スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ページトップへ戻るボタンをスクロールした時に表示する

スクロールしないとすべて表示できないページには、ページトップへ戻るボタンがあると便利。最近は、ページトップへ戻る動作をスムーズなアニメーションで設定されているサイトも多いです。

そのボタンをさらに、スクロールしたときに表示して、ページ上部を表示しているときには消えるように改良されたものが「Create a Hovering Scroll to Top Button With JQuery - Cherrysave」で紹介されています。

hovering scroll to top

デモはこちら。

これを実装するには、jQuery と jQuery.Scroll を読み込む必要があるようです。
<script type="text/javascript" src="http://www.google.com/jsapi">
<script type="text/javascript">google.load("jquery", "1.4");
<script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js">

あとは、ページトップへ戻るボタンを設置し、スクロールしたら表示されて戻ると消える JavaScript を元サイトよりコピーするだけ。ボタンのスタイルはCSSで自由に変えられます。ボタンの位置は position で設定しているので、ブラウザによって微調整が必要ですね。IEとか。

詳しくは元サイトよりどうぞ。

Create a Hovering Scroll to Top Button With JQuery - Cherrysave

関連するエントリー
CSSスプライトにアニメーションを設定できるSpritemenu
カレンダーで日付入力ができるjQuery Date Inputが便利
テーブルの行や列を交互に色付けしてみる

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。