🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

539閲覧

【jQuery】スクロールでボタンを表示、クリックで非表示、再スクロールで表示したい

necoda

総合スコア4

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/11/11 07:28

編集2019/11/12 01:34

前提・実現したいこと

1)800pxまでスクロールでボタン出現(画面下部で固定、フッターの上部で固定)
2)ボタンクリック(ページ内アンカー)でボタンが消える
3)再スクロールで表示

発生している問題・エラーメッセージ

クリックでいったんボタンが消えるが、すぐに表示される

該当のソースコード

jQuery

1$(document).ready(function(){ 2 $(".btn").hide(); 3 $(window).on("scroll", function() { 4 if ($(this).scrollTop() > 800) { 5 $(".btn").fadeIn("fast"); 6 } else { 7 $(".btn").fadeOut("fast"); 8 } 9 scrollHeight = $(document).height(); 10 scrollPosition = $(window).height() + $(window).scrollTop(); 11 footHeight = $("footer").innerHeight(); 12 if ( scrollHeight - scrollPosition <= footHeight ) { 13 $(".btn").css({ 14 "position":"absolute", 15 "bottom": footHeight + 50 16 }); 17 } else { 18 $(".btn").css({ 19 "position":"fixed", 20 "bottom": "20px" 21 }); 22 } 23 }); 24 25 $('a[href^="#"]').click(function() { 26 var speed = 400; 27 var href= $(this).attr("href"); 28 var target = $(href == "#" || href == "" ? 'html' : href); 29 var position = target.offset().top; 30 $('body,html').animate({scrollTop:position}, speed, 'swing'); 31 $(".btn").fadeOut(); 32 $(window).off("scroll", display); 33 return false; 34 }); 35});

htmlは下記のようになっています。

html

1 2<div class="hero">高さ800pxの画像:ここではボタンは出現しない</div> 3 4<div id="sec01">1</div> 5<div id="sec02">2</div> 6<div id="sec03">3</div> 7 8<footer>ボタンは最下部に固定で、footerまでくればfooterの上に表示</footer> 9 10<div class="btn"><a href="#sec01">sec01へアンカーリンク</a></div> 11<div class="btn"><a href="#sec02">sec02へアンカーリンク</a></div> 12<div class="btn"><a href="#sec03">sec03へアンカーリンク</a></div> 13

試したこと

ページ内アンカーのためクリック後もすぐに
if ($(this).scrollTop() > 800) {
$(".btn").fadeIn("fast");
が効いてしまっている?

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

HTML

1<div id="sec01">1</div> 2. 3<div id="sec02">2</div> 4. 5<div id="sec03">3</div> 6. 7. 8<footer>.....</footer> 9 10<div class="btn"> 11 <a href="#sec01">sec01へアンカーリンク</a> 12 <a href="#sec02">sec02へアンカーリンク</a> 13 <a href="#sec03">sec03へアンカーリンク</a> 14</div>

・アンカーリンクがfixedなので、1つずつ<div class="btn"></div>で囲むと、重なります。
<div id="#sec01">の「#」は不要です。

JavaScript

1 var scrollHeight = $(document).height(); 2 var scrollPosition = $(window).height() + $(window).scrollTop(); 3 var footHeight = $("footer").innerHeight();

・グローバルな変数になってしまうのでvarを付けた方がよいでしょう。

投稿2019/11/11 17:59

naomi3

総合スコア1105

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

necoda

2019/11/11 18:06

ありがとうございます。divのidは記述ミスでしたので質問のソースを修正しました。 2)ボタンクリック(ページ内アンカー)でボタンが消える 3)再スクロールで表示 のjQueryについても、もしわかれば指摘いただけると嬉しいです。宜しくお願い致します。
naomi3

2019/11/11 18:29

これらについてはできているように思いますが、詳しいご要望があるならお聞かせください。
necoda

2019/11/12 01:37

2)のクリック後にボタンが非表示にならなかったのですが、自己解決できました。ありがとうございました。
guest

0

自己解決

だいぶ変わりましたが、これで実現できました。
ありがとうございました。

jQquery

1$(document).ready(function(){ 2 var flag = false; 3 var spbtn = $('.btn'); 4 var showFlag = false; 5 6 $(window).on("scroll", function() { 7 if ($(this).scrollTop() > 800) { 8 if (!flag && showFlag == false) { 9 showFlag = true; 10 spbtn.fadeIn("fast"); 11 } 12 } else { 13 if (showFlag) { 14 showFlag = false; 15 spbtn.fadeOut("fast"); 16 } 17 } 18 flag = false; 19 var scrollHeight = $(document).height(); 20 var scrollPosition = $(window).height() + $(window).scrollTop(); 21 var footHeight = $("footer").innerHeight(); 22 if ( scrollHeight - scrollPosition <= footHeight ) { 23 spbtn.css({ 24 "position":"absolute", 25 "bottom": footHeight + 20 26 }); 27 } else { 28 spbtn.css({ 29 "position":"fixed", 30 "bottom": "20px" 31 }); 32 } 33 }); 34 35 $('.btn a').click(function() { 36 showFlag = false; 37 spbtn.fadeOut("fast"); 38 flag = true; 39 }); 40});

投稿2019/11/11 19:07

necoda

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問