Разрывы страниц не работают в тегах разделов

Я делаю проект с django, html, css и javascript и создаю страницу с секциями и прокруткой. Я пытаюсь перейти вниз по строке после моего тега, но до моего тега в секции. Когда я пробовал использовать теги break, ничего не происходит, даже когда я использую несколько. Я думаю, что дело в том, что я пытаюсь сделать это в теге раздела. введите описание изображения здесь

<body>
        <div class = "nav">
            <a href="#1">Home</a>
            <a href="#2">Education</a>
            <a href="#3">Projects</a>
            <a href="#4">Skills</a>
            <a href="#5">Experience</a>
        </div>
        <div class="scroll_container">
        <section id = "1" class = "home_section">
            <h1>Tyler Olson</h1>
            <img class="animate__animated animate__bounce" src="/static/down_arrow.png" alt="bouncing dodwn arrow" style="width:50px;height:50px;">
        </section>
        ...
      </div>
      </body>

Моя цель состоит в том, чтобы стрелка постоянно прыгала внизу по центру раздела, но я совершенно не могу переместить ее вниз сейчас, я даже пытался изменить некоторые значения css, чтобы переместить тег img, но ни один из них ничего не сделал

Может быть этот ответ полезен для вашей попытки

<style>
    
    .animate__bounce {
        width: 100px;
        height: 100px;
        animation: bounce 0.5s;
        animation-direction: alternate;
        animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
        animation-iteration-count: infinite;
    }
      
    @keyframes bounce {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(0, 200px, 0);
        }
    }
    /* Prefix Support */
      
    animate__bounce {
        -webkit-animation-name: bounce;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: cubic-bezier(
        .5, 0.05, 1, .5);
        -webkit-animation-iteration-count: infinite;
    }
      
    @-webkit-keyframes bounce {
        from {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        to {
            -webkit-transform: translate3d(0, 200px, 0);
            transform: translate3d(0, 200px, 0);
        }
    }
</style>
Вернуться на верх