このブログにも設置しました。スクロールすると、文字部分が白く、影の付いた ▲ ボタンがページの右下に表示されます。 『ページの先頭から 200px までは、スクロールボタンを表示しない』という処理の部分にのみ jQuery を使用しています。常に表示しておくのならば CSS のみで問題ありません( その場合は、A 要素に display:none は必要ありません ) CSS
#scroll_top {
position: fixed;
text-decoration: none;
font-size: 40px;
color: rgba(255,255,255,0.85);
text-shadow: 1px 1px 2px #656a6f;
right: 0.5%;
bottom: 5rem;
}
A 要素 これは、</body> の直前に記述しています。
<a href="javascript:void(0);" id="scroll_top" onclick="window.scroll(0,0);" style="display:none;">▲</a>
※ CSS の記述を A 要素に全てインラインスタイルとして記述してもいいです。 jQuery 部分
$(function(){
$(window).on("scroll",function(){
var scroll = $("html").scrollTop();
if ( scroll <= 200 && $("#scroll_top").css("display") != "none" ) {
$("#scroll_top").css("display","none");
}
if ( scroll > 200 && $("#scroll_top").css("display") == "none" ) {
$("#scroll_top").css("display","inline");
}
});
});
この jQuery では、A 要素のインラインスタイルである、display プロパティをフラグとして使用し、表示したり消したりするのは最低限の回数になるようにしています。なので、display:none は必ず インラインスタイル側で指定する必要があります。
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
- jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直..
