Problem with Carousel HTML AND CSS

Question

When I click on the link that directs me to the respective slide, it’s kind of anchoring and sliding the page down a little bit, how do I get it to slide without html understanding that as a link itself?

.slider {
  width: 300px;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 300px;
  height: 300px;
  margin-right: 50px;
  border-radius: 10px;
  background: #eee;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}
.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}

                        <div class="slider">
                            <a href="#slide-1">1</a>
                            <a href="#slide-2">2</a>
                            <a href="#slide-3">3</a>
                            <a href="#slide-4">4</a>
                            <a href="#slide-5">5</a>

                            <div class="slides">
                                <div id="slide-1">
                                  1
                                </div>
                                <div id="slide-2">
                                  2
                                </div>
                                <div id="slide-3">
                                  3
                                </div>
                                <div id="slide-4">
                                  4
                                </div>
                                <div id="slide-5">
                                  5
                                </div>
                            </div>
                        </div>

Answer 1

I found the solution with JAVASCRIPT, I will post here. I do not know if it is the most correct way, but it was the fastest and it worked.

            $(document).ready(function(){
                $('#s1').click(function (){
                   $('.slides').scrollLeft(0);  
                });
                $('#s2').click(function (){
                   var largura_div = $('.slider').width(); 
                   $('.slides').scrollLeft(largura_div);  
                });
                $('#s3').click(function (){
                   var largura_div = $('.slider').width(); 
                   $('.slides').scrollLeft(largura_div * 2);  
                });
                
            });

.slider {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  min-height: 300px;
  margin-right: 50px;
  border-radius: 10px;
  background: #DCDcDC;
  color: #111;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  text-align: justify;
  padding: 20px;
}

.slides > div i {
    font-size: 120px;
    color: #2196f3;
}

.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
  cursor: pointer;
}

@media only screen and (max-width:778px){
    .slides > div i {
        margin-bottom: 200px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
                            <a id="s1">1</a>
                            <a id="s2">2</a>
                            <a id="s3" >3</a>

                            <div class="slides">
                                <div id="slide-1">
                                    <div class="row">
                                        <div class="col-lg-4 text-center"><br>
                                            <i class="icofont icofont-industries-alt-5"></i>
                                        </div>
                                        <div class="col-lg-8">
                                            <h5 style="text-align: center"><b>1</b></h5>
                                        </div>
                                    </div>
                                </div>
                                <div id="slide-2">
                                    <div class="row">
                                        <div class="col-lg-4 text-center"><br>
                                            <i class="icofont icofont-stock-mobile"></i>
                                        </div>
                                        <div class="col-lg-8">
                                            <h5 style="text-align: center"><b>2</b></h5>
                                        </div>
                                    </div>
                                </div>
                                <div id="slide-3">
                                    <div class="row">
                                        <div class="col-lg-4 text-center"><br><br>
                                            <i class="icofont icofont-food-cart"></i>
                                        </div>
                                        <div class="col-lg-8">
                                            <h5 style="text-align: center"><b>3</b></h5>

                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

Answer 2

The ideal is to use javascript for this, because when clicking on the link the browser places the element at the top of the page, maaaaas, in the scenario in question, you can do with a small hackzinho (gambiarra) of margin and padding in the slides.

You increase the size of the div at the top and make up for it with a negative margin, with this, you position the div in the same position as the carousel.

  padding-top:50px;
  margin-top:-50px;

The secret is that these sizes are longer than the distance between the top and the slides.

Remembering, this solves your question, is not the ideal way.

https://jsfiddle.net/ntc9xrw1/1/ Fiddle, added lines 52 and 53 in css.