#11-下滑动态做起来！(JS: scrollTo & scrollBy)

今天来介绍一下往下滑和往上滑的指引动画和搭配Web API。
现在都很流行第一屏设计做好做满，
有时候太美了会让使用者忘记（/根本不想）往下滑，

适当地指引下滑，就是个满重要的动作，
尤其是当你想让他看下面的资讯的时候。

而回到最上面，这个使用情境我本人就不是很常用了，
有使用习惯的可以帮我留个言?

先看成果：

这边主要就是使用Web API: scrollTo & scrollBy

scrollTo: 就是往下滑到指定的位置，
scrollBy: 是指现在的位置再加上指定的距离，

再加上参数：behavior: 'smooth'
让滑动可以很顺畅地溜～上去

mouse.addEventListener('click',function(){
  window.scrollBy({
    top: window.innerHeight,
    behavior: 'smooth'
  });
})

toTop.addEventListener('click',function(){
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
})

而滑鼠的动态部分，是用CSS做的，
自己觉得满可爱的

@keyframes mouse{
  0%, 50%{
    transform: translate(-50%, 0);
    top: 10%;
    opacity: 1;
  }
  80%, 100%{
    transform: translate(-50%, 0) scale(0.5);
    top: 40%;
    opacity: 0;
  }
}

全部的code

直接看code吧！

//html
<section>
  <div class="mouse"></div>
</section>
<section>
    <div class="to-top"></div>
</section>

//SCSS

section{
  width: 100%;
  height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.mouse{
  cursor: pointer;
  width: 30px;
  height: 50px;
  border-radius: 20px;
  border: 2px solid white;
  position: relative;
  margin-bottom: 60px;
  
  &:before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    left: 50%;
    top: 10%;
    transform: translate(-50%, 0);
    animation: mouse 3s infinite ; 
  }
}

@keyframes mouse{
  0%, 50%{
    transform: translate(-50%, 0);
    top: 10%;
    opacity: 1;
  }
  80%, 100%{
    transform: translate(-50%, 0) scale(0.5);
    top: 40%;
    opacity: 0;
  }
}

.to-top{
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid white;
  position: relative;
  margin-bottom: 100px;
  &:before{
    content:'';
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(-45deg) translate(-70%, 0);
    top: 20%;
    left: 50%;
    animation: toTop 2s infinite ease-in;
  }
}

@keyframes toTop{
  0%, 30%{
    top: 20%;
    opacity: 1;
  }
  80%{
    top: 5%;
    opacity: 0.3;
  }
  90%,100%{
    top: 0%;
    opacity: 0;
  }
}

//JS
const mouse = document.querySelector('.mouse');
const toTop = document.querySelector('.to-top');

mouse.addEventListener('click',function(){
  window.scrollBy({
    top: window.innerHeight,
    behavior: 'smooth'
  });
})

toTop.addEventListener('click',function(){
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
})