トップに戻るボタン

2017/09up

htmlはこちら。
id名はでgotopにしました。
<p id="gotop"><a href="#">↑</a></p>


cssは
#gotop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
 
#gotop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 8px;
  border-radius: 30px;
  width: 40px;
  height: 40px;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
 
#gotop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

scriptは
$(function(){
var topBtn=$('#gotop');
topBtn.hide();
$(window).scroll(function(){
  if($(this).scrollTop()>80){
    topBtn.fadeIn();
  }else{
    topBtn.fadeOut();
  } 
});
topBtn.click(function(){
  $('body,html').animate({
  scrollTop: 0},500);
  return false;
});
});