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

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

関連記事

アイキャッチ画像をPCとスマホ

アイキャッチ画像をPCとスマホで見え方を変える

  WordPressを使っていて、固定ページにもアイキャッチ画像を設定するところがあります。 そのアイキャッチ画像をページのヘッダーあたりに表示させたいと思いました。 PCでは、希望通りの …

画像のトリミング

object-fitで画像のトリミング

  PCとスマホで画像の見え方を変えるのに役立つのが、 cssの「object-fit」プロパティです。 背景画像として扱うcssの「background-size」というのもありますが、 …

カスタムフィールド カテゴリー

Advanced Custom Fieldsをカテゴリに使用したときの画像の取得出力

  いろいろ試してみた結果、やっとできたので覚書として記事にしました。   カスタムフィールドのカテゴリー画像作成   Advanced Custom Fieldsのプラ …

vegas2

WordPressで画像をかっこよく見せるVEGAS

  WordPressで画像をかっこよく見せる ワードプレスを使っていて画像を扱うことも多いと思いますが、サイトをかっこよくおしゃれに見せる方法の一つとして、画像に手を加えてインパクトを与え …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …