FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

jQuery

スクロールしたら「トップへ戻る」ボタンを表示するプラグインjquery.pageTopButton.js

投稿日:2013年1月16日 更新日:

SPONSORED LINK

Wordpressによくある
スクロールしたら「トップへ戻る」ボタンを表示するプラグインをいれたけど、
うまく動かなかったので作った方がはやいので作ってみました。
このブログにいれているものと同じです。

SPONSORED LINK

スクロールしたら「トップへ戻る」ボタンを表示するプラグイン
jquery.pageTopButton.js

デモ

デモをみる

スクロールすると「トップへ戻る」ボタンが表示されます。
おまけでSmooth Scrollも作っています。

必要なファイル

必要なのは

jQueryはサイトからダウンロードしてください。

jquery.pageTopButton.jsは下記からダウンロードしてください。

ダウンロード

jquery.smoothscroll.jsの使い方は下の方に掲載しています。

ソース

<head>内に記述しています。

オプション

オプション 内容 デフォルト値
xPos 表示が開始される位置 1
fadeTime 表示のフェード時間 200

jquery.smoothscroll.js

id名に対してスクロールします。

[crayon]
B地点へ

B地点

[/crayon]

とすると
id名anchor_bに移動します。

オプション

オプション 内容 デフォルト値
vy スクロールの速度 800
easing イージング swing

-jQuery

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

jQuery

jQueryでスクロールするとヘッダーを固定させる

SPONSORED LINK 最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ …

一覧が見やすい、jQueryのチートシート

SPONSORED LINK jQueryを使っていると、知っているものや、よく使うものしか使わなくて、意外と知らないイベントやセレクタがあったりします。 jQuery Cheat Sheet こちら …

写真をタイル状に並べてくれるjQuery「jMosaic」

SPONSORED LINK jMosaic 写真の高さなどを自動的にリサイズしてタイル状に並べてくれるjQuery「jMosaic」です。

jQuery

jQueryで追加したstyle属性を全て削除する方法

SPONSORED LINK jQueryでアニメーションなどを行うとインライン要素でstyle属性が追加されますが全て削除したい場合は、 $(‘#area *’) *で#area内の全ての要素を取得 …

jQuery

jQueryのaddClassで複数のclassを追加する方法

SPONSORED LINK 下記のようにスペースで区切れば、複数指定できます。 $(‘div).addClass(‘btn btn-default btn-lg’); 簡単ですが、使う機会もなかった …

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。