Stack Overflow на русском Asked on November 13, 2021
Не работает скрипт плавной прокрутки к нужному элементу на странице, вместо плавной прокрутки при нажатии на кнопку, срабатывает мометальная прокрутка, и меня перенаправляет на элемент, id которого я указал. Код внизу
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#menu").on("click", "a", function(event) {
//отменяем стандартную обработку нажатия по ссылке
event.preventDefault();
//забираем идентификатор бока с атрибута href
var id = $(this).attr('href'),
// узнаем высоту от начала страницы до блока
// на который ссылается якорь
top = $(id).offset().top;
//анимируем переход на расстояние - top за 1500 мс
$('body,html').animate({
scrollTop: top
}, 1500);
});
});
</script>
this может ссылаться к window. Отлавливайте нажатую ссылку через event.target.
$(".limit.items > div > a").on("click", (e) => {
e.preventDefault();
let id = $(e.target).attr('href'), top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
Answered by Misha Saidov on November 13, 2021
Все работает, проблема на вашем сайте
$(document).ready(function() {
$("#menu").on("click", "a", function(event) {
//отменяем стандартную обработку нажатия по ссылке
event.preventDefault();
//забираем идентификатор бока с атрибута href
var id = $(this).attr('href'),
//узнаем высоту от начала страницы до блока на который ссылается якорь
top = $(id).offset().top;
//анимируем переход на расстояние - top за 1500 мс
$('body,html').animate({
scrollTop: top
}, 1500);
});
});#menu {
position: fixed;
left: 0;
top: 0;
}
section {
height: 400px;
border-bottom: 100px solid green;
/*font-size: 100px;
color: green;*/
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li><a href="#ex1">Link #1</a></li>
<li><a href="#ex2">Link #2</a></li>
<li><a href="#ex3">Link #3</a></li>
<li><a href="#ex4">Link #4</a></li>
</ul>
</nav>
<div id="content">
<section id="ex1">
...
</section>
<div class="separator"></div>
<section id="ex2">
...
</section>
<div class="separator"></div>
<section id="ex3">
...
</section>
<div class="separator"></div>
<section id="ex4">
...
</section>
</div>Answered by Get-Web on November 13, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP