I basically have the href of my tag scroll to a certain part of my webpage. But every time I reload the webpage, it automatically scrolls to that part of the website without actually clicking it. Does anybody have any idea why this is?

html

<div class="arrow">
             <a href="#scroll-to"><span></span></a>
</div>

css

.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    transform: rotate(45deg);
    margin: -10px;
    animation: scroll 2s infinite;}

@keyframes scroll {
0%{
    opacity: 1;
    transform: rotate(45deg) translate(-20px, -20px);
}
50%{
    opacity: 1;
}
100%{
    opacity: 0;
    transform: rotate(45deg) translate(20px, 20px);
}}