Почему страница прокручивается вверх при нажатии на миниатюру галереи?
У меня есть фотогалерея, которая ведет себя странно, но я не могу понять. При нажатии на миниатюру, которая должна показывать мне изображение, он не только делает это, но и прокручивает страницу вверх. Если галерея отображается немного ниже верхней части экрана, она будет прокручиваться вверх, а если она проходит через верхнюю часть экрана, она будет прокручиваться вниз до тех пор, пока верхняя часть раздела «Галерея» не совпадет с верхней частью экрана. экран.
Я попытался воспроизвести то, что сделал на codepen: https://codepen.io/dmontesi/pen/VJZeVq. Я использую только SCSS/HTML.
<!-- Gallery -->
<section class = "wrapper">
<div class = "wrapper__gall">
<ul class = "slides">
<li id = "slide1"><img src = "https://cdn.pixabay.com/photo/2016/06/24/11/49/architecture-1477103_960_720.jpg" alt = "" /></li>
<li id = "slide2"><img src = "https://cdn.pixabay.com/photo/2016/06/24/11/48/architecture-1477101_960_720.jpg" alt = "" /></li>
<li id = "slide3"><img src = "https://cdn.pixabay.com/photo/2016/06/24/11/46/architecture-1477099_960_720.jpg" alt = "" /></li>
</ul>
<ul class = "thumbnails">
<li>
<a href = "#slide1"><img src = "https://cdn.pixabay.com/photo/2016/06/24/11/49/architecture-1477103_960_720.jpg" /></a>
</li>
<li>
<a href = "#slide2"><img src = "https://cdn.pixabay.com/photo/2016/06/24/11/48/architecture-1477101_960_720.jpg" /></a>
</li>
<li>
<a href = "#slide3"><img src = "https://cdn.pixabay.com/photo/2016/06/24/11/46/architecture-1477099_960_720.jpg" /></a>
</li>
</ul>
</div>
</section>
Я только хочу, чтобы он показывал следующий слайд и не перемещал позицию пользователя на экране.
Ответы 1
(Вы можете увидеть полный код здесь: Кодепен)
Вопрос:
Почему, когда вы нажимаете на навигационную ссылку, она прокручивается до верхней части изображения? и как это предотвратить?
Отвечать:
Что ж, это естественное поведение ссылки. это называется якорной ссылкой.
если вы используете <a href = "#slide1"> , когда пользователь нажимает на него, страница будет прокручиваться до элемента с id = slide1.
вы можете предотвратить это (добавив onclick = "event.preventDefault()"), но это означает, что вы больше не можете использовать правило css :target. это означает, что целевое изображение больше не будет отображаться поверх других изображений.
Вместо этого вы можете использовать javascript для полного управления поведением.
- Добавьте обработчик onclick к вашим навигационным ссылкам:
<a href = "#slide1" onclick='navigate(event)'>
- вы должны написать функцию навигации javascript. эта функция должна дать класс
activeиз текущегоactiveэлемента и передать его тому, на который нажали. так:
function navigate(event){
//get active element
var active = event.target.closest(".wrapper").getElementsByClassName("active")[0];
//remove class "active" from active element
if (active)active.classList.remove("active");
//get target element from link
var target = document.getElementById(event.target.closest("a").getAttribute("href").replace("#",""));
//add class "active" to the target
target.classList.add("active");
//prevent default link behaviour
event.preventDefault();
}
- тогда мы должны написать правило css для активного изображения (оно заменило селектор
li:target):
.slides li.active {
z-index: 3;
}
.slides li:not(.active) {
z-index: 0;
}
(Вы можете увидеть полный код здесь: Кодепен)
Спасибо за ответ и за размещение ручки. Я вижу, что страница по-прежнему прокручивается вверх и вниз к якорной ссылке, но ваше предложение имеет большой смысл, если вместо того, чтобы указывать на якорные ссылки, я изменяю его так, чтобы он указывал непосредственно на изображение. Я буду играть с ним и держать вас в курсе.
@DanMontesinos, к сожалению, вы хотите, чтобы ползунок скользил по этому изображению, а не по прямой ссылке на изображение, верно? обновит ответ через несколько минут.
@DanMontesinos можно ли использовать javascript?
уверен, это тоже сработает. Все, что я пытаюсь сделать, это скользить, но не двигаться вверх или вниз в зависимости от того, где вы находитесь на странице.
@DanMontesinos извините за неправильное время. я не могу управлять своим временем большую часть времени. обновил ответ, и теперь он работает, как вы описали.
Извините за задержку, возвращался с работы. Это потрясающе! Это именно то, что я хотел сделать. Большое спасибо за всю помощь!
@DanMontesinos обновил ответ, чтобы вы могли видеть, как ссылаться на изображения.