Q: how to fix the down arrow icons put on the bottom of the first view in index.html? I put a down-directed arrow icons on the bottom of the first view of my website. I set the css for the icons like below. However I scroll down the page, they follow. I just want leave them on the first view. Does anyone have any tips to fix that? 



function scrollDown() {
  var businessPage = document.getElementById("businessPage");
  businessPage.scrollIntoView();
}
.box {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box span {
  display: block;
  width: 20px;
  height: 20px;
  border-bottom: 3px solid white;
  border-right: 3px solid white;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2s infinite;
}

.box span:nth-child(1) {
  opacity: 0.3
}

.box span:nth-child(2) {
  opacity: 0.5;
}
<body>
  <div class="box">
    <span onclick="scrollDown()"></span>
    <span onclick="scrollDown()"></span>
    <span onclick="scrollDown()"></span>
  </div>
</body>


