Имеется слайдер текста. Сделано на коленке, так что на хороший код рассчитывать не нужно. Все же, по какой причине при нажатии на кнопку(кружок) срабатывает якорь и страница сайта опускается вниз? По возможности, предложите вариант исправления. Соответствующие HTML и CSS приведены ниже
.review {
background-color: #555;
background-repeat: no-repeat;
background-size: 1600px;
background-position: top;
height: 250px;
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
overflow: hidden;
}
.review-info {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
flex-shrink: 0;
width: 100%;
margin-right: 0px;
box-sizing: border-box;
transform-origin: center;
transform: scale(1);
scroll-snap-align: center;
color: black;
font-family: 'Lato-Light';
font-size: 20px;
}
.review-quote {
margin-top: 50px;
text-align: center;
color: white;
line-height: 1.5em;
width: 890px;
height: 20%;
}
.review-label {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.review-author {
color: white;
font-family: 'Lato-Bold';
}
.review-author::after {
content: "";
padding-right: 10px;
border-right: 1.3px solid white;
display: inline-block;
height: 15px;
}
.slider-group {
margin-left: 10px;
box-sizing: border-box;
position: relative;
text-align: center;
display: flex;
column-gap: 10px;
}
.slider__dot[isActive="true"] {
background-color: white;
}
.slider__dot {
display: inline-block;
height: 7px;
width: 7px;
border-radius: 50%;
border: 2px solid white;
}
<div class="review">
<div class="review-info" id="review-first">
<div class="review-quote">"Suspenids tempor turpis odio, sit amet cursus leo consequat non. Maecenas lacinia faucibus enimqui interdum dolor pulvinar vitae."</div>
<div class="review-label">
<div class="review-author">Jonny Doe</div>
<div class="slider-group">
<a class="slider__dot" href="#review-first" isActive="true"></a>
<a class="slider__dot" href="#review-second"></a>
<a class="slider__dot" href="#review-third"></a>
</div>
</div>
</div>
<div class="review-info" id="review-second">
<div class="review-quote">"Suspenids tempor turpis odio, sit amet cursus leo consequat non. Maecenas lacinia faucibus enimqui interdum dolor pulvinar vitae."</div>
<div class="review-label">
<div class="review-author">John Doe</div>
<div class="slider-group">
<a class="slider__dot" href="#review-first"></a>
<a class="slider__dot" href="#review-second" isActive="true"></a>
<a class="slider__dot" href="#review-third"></a>
</div>
</div>
</div>
<div class="review-info" id="review-third">
<div class="review-quote">"Suspenids tempor turpis odio, sit amet cursus leo consequat non. Maecenas lacinia faucibus enimqui interdum dolor pulvinar vitae."</div>
<div class="review-label">
<div class="review-author">Johnathan Doe</div>
<div class="slider-group">
<a class="slider__dot" href="#review-first"></a>
<a class="slider__dot" href="#review-second"></a>
<a class="slider__dot" href="#review-third" isActive="true"></a>
</div>
</div>
</div>
</div>