スクロールボタン コピペでできる

 

 

WordPressでスクロールボタンを設置

 

php部分

<div class="scroll" href="#first-section">
 <span>scroll</span>
  <div class="arrow"></div>
</div>

 
 

記述する場所は、header.phpあたりが良いかな

 

class名は、覚えやすい好きなものに変えてください。

 

hrefは、クリックで飛ばしたいところに設置（無くても良いです）

 

条件分岐を追加して、モバイルでは見せないようにすることもいいかな？

 

その場合は、

php部分

<?php if ( !wp_is_mobile()): ?>
 <div class="scroll" href="#first-section">
  <span>scroll</span>
  <div class="arrow"></div>
</div>
<?php endif;?>

 
 

次は、cssで調整設置などを行います。

css部分

　
.scroll {
  position: absolute;
  right: 0;
  bottom: 15%;
  left: 0;
  width: 30px;
  height: 16px;
  text-decoration: none;
  color: #333;
  display: inline-block;
  margin: auto;
}
.scroll span {
  font-size: 12px;
  color: #333;
  text-align: center;
  display: inline-block;
}

.arrow {
  position: absolute;
  top: 30px;
  left: 15px;
  animation: 2s arrow-animation infinite ease-in-out;
  width: 0;
  height: 50px;
  border: 0.5px solid #333;
}
.arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: -2px;
  width: 1px;
  height: 10px;
  border-top: 10px solid #333;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
}

@keyframes arrow-animation {
  0% {
    height: 10px;
  }
  70% {
    height: 50px;
  }
}

 
 

最後に、jsで見え方に手を加えます。

 

js部分

jQuery(document).ready(function () {
  var emscroll = $('.scroll');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 200) {
            emscroll.fadeOut(1500);
       } else {
            emscroll.fadeIn(1500);
            }
       });
	});

 
 

実際にスクロールが始まると消えてなくなるようにしました。

 
 
【集客職人 RankingCoach】