CSSカルーセルの挙動を直したい

前提・実現したいこと

ページの途中にあるスライダーなのですがサムネイルをクリックしたら稼働するスライダーを制作しているのですが、サムネイルをaダグにしidを入れて上部のスライダーを動かすようにしたところクリックするとページの上にカルーセルが行ってしまいます。
表示位置を変えずにスライダーが動作するようにしたいのですがどうしたらよいのか分からず、調べても上手くいきません。

該当のソースコード

HTML
1<section id="slider-area">
2    <div id="top_slider">
3      <ul id="slider">
4        <li id="slide-1">
5          <img src="1.png">
6        </li>
7        <li id="slide-2">
8          <img src="2.png">
9        </li>
10        <li id="slide-3">
11          <img src="3.png">
12        </li>
13        <li id="slide-4">
14          <img src="4.png">
15        </li>
16
17      </ul>
18      <ul class="nav">
19        <li>
20          <a href="#slide-1">
21            <img src="1.png">
22          </a>
23        </li>
24        <li>
25          <a href="#slide-2">
26            <img src="2.png">
27          </a>
28        </li>
29        <li>
30          <a href="#slide-3">
31            <img src="3.png">
32          </a>
33        </li>
34        <li>
35          <a href="#slide-4">
36            <img src="4.png">
37          </a>
38        </li>
39      </ul>
40    </div>
41  </section>

CSS
1    /*カルーセル*/
2#slider-area{
3  width: 2400px;
4    margin: auto;
5  }
6#top_slider{
7  overflow: hidden;
8  width: 100%;
9  margin-top: 60px;
10  }
11#top_slider #slider{
12  list-style: none;
13  width: 100%;
14  display: flex;
15  padding: 0!important;
16  }
17#slider li img{
18  width: 2400px;
19  }
20#top_slider .nav{
21  width: 2400px;
22  padding-left: 0;
23}
24#top_slider .nav li:first-child{
25  margin-left: 0;
26}
27#top_slider .nav li{
28  margin-left: 30px;
29}
30 #top_slider .nav img{
31  width: 600px;
32 }
33  /*スライダー手動動作*/
34#top_slider .nav{
35    list-style: none;
36    display: flex;
37    margin: 0 auto;
38  }
39#top_slider #slider{
40  transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0s;
41  -webkit-transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0;
42}
43#slider {
44  display: flex;
45  overflow-x: auto;
46  scroll-snap-type: x mandatory;
47  scroll-behavior: smooth;
48  -webkit-overflow-scrolling: touch;
49}
50#slider::-webkit-scrollbar {
51  width: 10px;
52  height: 10px;
53}
54#slider::-webkit-scrollbar-track {
55  background: transparent;
56}