I am drawing arrows on my HTML page and I want to make it clickable so when that arrow is pressed, it acts as a button

I am drawing an arrow at the top of my webpage that kind of indicates to scroll down. This is good however I would like it so that you can click that arrow and then it scrolls down to the next div. The divs already have ID's so all that needs to be implemented is making that arrow into a button. I am also using bootstrap if that helps.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

html {
  scroll-behavior: smooth;
}

.arrows {
  width: 60px;
  height: 72px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 10%;
}

.arrows path {
  stroke: #ffffff;
  fill: transparent;
  stroke-width: 3px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

@keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes arrow
/*Safari and Chrome*/

{
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.arrows path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
  /* Safari 和 Chrome */
}

.arrows path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
  /* Safari 和 Chrome */
}

.arrows path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
  /* Safari 和 Chrome */
}

<!-- language: lang-html -->

<svg class="arrows">
  <path class="a1" d="M0 0 L30 32 L60 0"></path>
  <path class="a2" d="M0 20 L30 52 L60 20"></path>
  <path class="a3" d="M0 40 L30 72 L60 40"></path>
</svg>

<!-- end snippet -->

I tried using an anchor at the start of the drawing but it didnt work.

Not sure what issues you are having with detecting the click. Below is svg, an anchor, and a button.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelector(".wrapper").addEventListener("click", function (e) {
 const elem = e.target.closest(".svg");
 if (!elem) return;
 console.log(elem.dataset.id);
});

<!-- language: lang-html -->

<div class="wrapper">
<svg class="svg" data-id="1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>

<a href="#" class="svg" data-id="2">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
</a>


<button class="svg" data-id="3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" clip-rule="evenodd"><path d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/></svg>
</button>
</div>

<!-- end snippet -->