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でフォトギャラリーを作るのに3つのプラグインを入れてみた

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

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

  VEGAS BACKGROUND SLIDESHOWの使い方   画像だけを利用した基本的な使い方   独自で作成したjsファイルがあるならそちらに以下のコードを記述 …

メンバー一覧選手一覧

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

  1.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …

レスポンシブ確認

レスポンシブの確認

  レスポンシブに対応したサイトを作って、 PC・ノート・タブレット・スマホなどの確認をしたい時におススメなのが、 『Responsively』   【Download now】か …

表示件数

意外と忘れていた表示件数

  アーカイブの表示件数   WordPressのテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …