WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

スクロール中はページトップが非表示になる

f:id:mmmmofu:20170320131851p:plain

http://efu.sakura.ne.jp/web/pagetop/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スクロール中はページトップが非表示になる</title>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="content">
    <h1>スクロール中はページトップが非表示になる</h1>
    <p>スクロールしてください。</p>
    <p>
      100pxスクロールするとページトップボタンが表示されます。<br>
      フッターに差し掛かると非表示になります。
    </p>

  </div>
  <p class="pagetop">PAGE TOP</p>
  <footer class="footer">
    <p class="footer_pagetop">PAGE TOP</p>
  </footer>
</body>
</html>
body, html, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

.content {
  height: 3000px;
}

h1 {
  text-align: center;
}

.content p {
  text-align: center;
  line-height: 1.6;
}

.pagetop {
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #FFA1DA;
  color: #FFF;
  line-height: 100px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
}

.pagetop:hover {
  opacity: 0.6;
  background: #9CBAF8;
}

.footer {
  width: 100%;
  height: 100px;
  background: #9CBAF8;
  -webkit-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;
}

.footer:hover {
  background: #FFA1DA;
}

.footer p {
  color: #FFF;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}
$(function(){
  $('.pagetop, .footer_pagetop').on('click', function(){
    $('body,html').animate({
     scrollTop: 0
   },800);
  });

  var timer = false;
  $(window).scroll(function(){
    var scrollY = $(this).scrollTop();
    var windowH = $(window).height();
    scrolling = true ;

    if (timer !== false) {
      clearTimeout(timer);
      $('.pagetop').fadeOut();
    }
    timer = setTimeout(function() {
      if(scrollY + windowH > $('.footer').offset().top) {
        $('.pagetop').fadeOut(400);
      } else if(scrollY > 100) {
        $('.pagetop').fadeIn(400);
      } else {
        $('.pagetop').fadeOut(400);
      }
    }, 500);
  });

});
広告を非表示にする