前提・実現したいこと
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/11 18:06
2019/11/11 18:29
2019/11/12 01:37