предотвратить переход страницы к цели привязки

Question

У меня слайдер выглядит так:

нижние кнопки - это якоря, как это <a href="#slide-1">1</a>.

и это мой слайдер (и якоря) css код:

#slider {
    display: flex;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
#slider img {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}
#slider-buttons {
    display: flex;
    justify-content: space-evenly;
    margin-top: calc(-10vw - 20px); /* I know I can use relative or absoulute positioning. but problem is not here */
    padding-bottom: 20px;
}
#slider-buttons a {
    width: 10vw;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #888;
    border-radius: 5px;
    font-size: 5vw;
}

проблема в этом состоянии:

Когда я нажимаю на привязку (в этом состоянии), страница переходит к началу изображения.

Я не могу использовать javascript в этом случае.