JavaScript

次のコンテンツへ誘導するスクロールダウンボタンの実装

JavaScript

ホームページのメインビジュアルでよく使われているスクロールダウンボタン。
今回はメインビジュアルをウィンドウの高さ100%で表示しその高さ分、ボタンをクリックすると下へスクロールする実装をしました。

スクロールダウンボタンの実装

DEMO

See the Pen scroll-down-button01 by RECOOORD (@recooord) on CodePen.


上記SCROLLをクリックして頂くと次のコンテンツの先頭までスクロールします。

HTML

<div class="mainvisual">
  <p class="scroll js-scroll"><a href="">SCROLL</a></p>
</div>
<section>
  <h2>First Section</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

SCSS

/*メインビジュアルの指定*/
.mainvisual{
  position: relative;
  height: 100vh;
  background: url(http://mias.kilo.jp/material/photo/img03.jpg) no-repeat center;
  background-size: cover;
}
/*スクロールボタンの指定*/
.scroll{
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  a{
    position: relative;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    padding: 0 0 50px;
    /*矢印を作成する*/
    &:before{
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      left: 0;
      right: 0;
      bottom: 25px;
      margin: auto;
      border-bottom: 2px solid #fff;
      border-right: 2px solid #fff;
      transform: rotate(45deg);
      animation: move 2s infinite;
    }
  }
}
section{
  max-width: 800px;
  padding: 50px 25px;
  margin: 0 auto;
  h2{
    font-size: 30px;
    font-weight: bold;
    margin: 0 0 25px;
  }
  p{
    line-height: 1.8;
    margin: 0 0 15px;
  }
}
/*矢印をアニメーションする*/
@keyframes move {
  0% {
    transform: rotate(45deg) translate(0, 0);
  }
  20% {
    transform: rotate(45deg) translate(10px, 10px);
  }
  40% {
    transform: rotate(45deg) translate(0, 0);
  }
}

メインビジュアルと次のコンテンツのプロパティを指定し、keyframesで矢印をアニメーションしています。

jQuery

$(window).on('load resize',function(){
  //ウィンドウの高さを取得する
  var targetY = $(window).height();
  
  //スクロールをクリックするとウィンドウの高さ分、下にスクロールする
  $('.js-scroll a').on('click',function(){
    $("html, body").stop().animate({scrollTop: targetY}, 500, 'swing');
    return false;
  });
});

最初にウィンドウの高さを取得しボタンをクリックしたらウィンドウの高さ分、下へスクロールする記述をしています。

あなたにおすすめの記事