Как не прыгнуть сверху при нажатии на якорь с ID

Question

Я создал карусель CSS / HTML с 4 слайдами, и при нажатии на кнопку внизу (href) отображается выбранный слайд. Проблема в том, что каждый раз, когда я нажимаю ссылку, я могу видеть выбранный слайд так, как хочу, но страница перескакивает вверх. Я знаю, что проблема в том, что я использовал идентификатор, но я не знаю, как избежать скачков страницы. Я попытался добавить этот скрипт:

$('a.someclass').click(function(e) {
    e.preventDefault();
});

, это html:

<div class="slider">
    <div class="slides">
        <div id="slide-1"></div>
        <div id="slide-2"></div>
        <div id="slide-3"></div>
        <div id="slide-4"></div>
    </div>
    <a href="#slide-1" class="slide-button">Slide 1</a>
    <a href="#slide-2" class="slide-button">Slide 2</a>
    <a href="#slide-3" class="slide-button">Slide 3</a>
    <a href="#slide-4" class="slide-button">Slide 4</a>
</div>

, но он не работает. Как я могу сделать? Спасибо

Answer 1

Ваш селектор неправильный. Используйте a.slide-button вместо a.someclass

$ () должен быть допустимым jQuery селектором DOM

$('a.slide-button').click(function(e) {
    e.preventDefault();
});

.slides {
  height: 100vh;
  background-color: cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">
    <div class="slides">
        <div id="slide-1"></div>
        <div id="slide-2"></div>
        <div id="slide-3"></div>
        <div id="slide-4"></div>
    </div>
    <a href="#slide-1" class="slide-button">Slide 1</a>
    <a href="#slide-2" class="slide-button">Slide 2</a>
    <a href="#slide-3" class="slide-button">Slide 3</a>
    <a href="#slide-4" class="slide-button">Slide 4</a>
</div>