У меня есть ссылка, показанная ниже, которая при нажатии на нее прокручивает пользователя до элемента #contactHeader. То, что я хочу сделать, это прокрутить до 200px ВЫШЕУКАЧАТЬ #contactHeader, а не напрямую к нему. Есть ли способ добавить правило, которое реализует проверку -200px, чтобы она прокручивалась до 200 пикселей над элементом?
<li><a id="scrollToContact" href="#">•</a></li>
$("#scrollToContact").click(function() {
$('html, body').animate({
scrollTop: $("#contactHeader").offset().top
}, 1000);
});
Свойство offset().top
возвращает вам целое число, поэтому вы можете просто вычесть его, чтобы перейти к более высокой позиции на странице:
$("#scrollToContact").click(function() {
$('html, body').animate({
scrollTop: $("#contactHeader").offset().top - 200
}, 1000);
});
Просто добавьте - 200
к концу строки scrollTop
.
$("#scrollToContact").click(function() {
$('html, body').animate({
scrollTop: $("#contactHeader").offset().top - 200
// Here -----------------------------------^^^^^^
}, 1000);
});
Или, если заголовок может находиться в пределах 200 пикселей вверху страницы, вам может понадобиться бросить Math.max
:
$("#scrollToContact").click(function() {
$('html, body').animate({
scrollTop: Math.max(0, $("#contactHeader").offset().top - 200)
}, 1000);
});
scrollTop: $("#contactHeader").offset().top -200
.offset().top
- это уже число.
scrollTop: $("#contactHeader").offset().top - 200
?