wordpress

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

投稿日:

スクロールボタン

 

 

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】

-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

お問い合わせ

WordPressにお問い合わせフォームを入れるならこの2つのどちらか

  お問い合わせフォームのプラグイン WordPressでWebサイトを作成していて、お問い合わせフォームを設置することがあると思いますが、そんな時はプラグインを使うと簡単に設置・導入が可能 …

vegas動画と画像

画像と動画を混合させて表示VEGAS

動画も一緒に表示させる方法   動かしてみた方法は以下の通りです。   1.先に動画を表示して、次に画像を表示する方法   jQuery(document).ready( …

予約1

MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする

  この日のこの時間だけ受け付けないようにしたい   無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …

選手一覧メンバー一覧

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤

  1.選手一覧、メンバー一覧表示   選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …