読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

ページトップへスムーズスクロール

ページトップへ(基本)

  • この例はPNG画像ですが、CSS3やFont Awesomeなどの指定も試してみましょう


f:id:web-0818:20170129214317p:plain



【例1】フェードインして表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップへ移動</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
#content {
  height: 2000px;
}
/*top btn
------------------------*/
#topBtn img {
  width: 25px;
}

#topBtn {
  position: fixed;
  bottom: 30px;
  right: 60px;
}

#topBtn > a {
  display: block;
  transition: all 0.3s ease;
}

#topBtn > a:hover {
  opacity: 0.6;
}
</style>
</head>
<body>
<div id="header">
<h1>ページトップへ移動</h1>
</div>
<div id="content"></div>
<div id="topBtn"><a href="#header"><img src="img/top_btn.png" alt="トップへ戻るボタン"></a></div>
<script>
$(function() { 
  var topBtn = $('#topBtn');
  
  topBtn.hide();
  
  $(window).scroll(function(){
    if( $(this).scrollTop()>100){
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  
  topBtn.on('click',function(){
    $('html,body').stop().animate({scrollTop:0}, 500);
    return false;
  });
});
</script>
</body>
</html>


【例2】下からスクロールにあわせて表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップへ移動</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
#content {
  height: 2000px;
}
/*top btn
------------------------*/
#topBtn img {
  width: 25px;
}

#topBtn {
  position: fixed;
  bottom: 30px;
  right: 60px;
}

#topBtn > a {
  display: block;
  transition: all 0.3s ease;
}

#topBtn > a:hover {
  opacity: 0.6;
}
</style>
</head>
<body>
<div id="header">
<h1>ページトップへ移動</h1>
</div>
<div id="content"></div>
<div id="topBtn"><a href="#header"><img src="img/top_btn.png" alt="トップへ戻るボタン"></a></div>
<script>
$(function() {
  var showFlag = false;
  var topBtn = $('#topBtn');	
  topBtn.css('bottom', '-100px');
  var showFlag = false;
  //スクロールが100に達したらボタン表示
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      if (showFlag == false) {
        showFlag = true;
        topBtn.stop().animate({'bottom' : '20px'}, 200); 
      }
    } else {
      if (showFlag) {
        showFlag = false;
        topBtn.stop().animate({'bottom' : '-100px'}, 200); 
      }
    }
  });
  //スクロールしてトップ
    topBtn.click(function () {
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
    });
});
</script>
</body>
</html>