Я использую jquery для прокрутки к разделам моей страницы.
Вот код:
// Scroll to element
$('#menu li a').click(function(){
var elementId = $(this).attr('href');
$('html, body').animate({ scrollTop: $(elementId).offset().top }, 1600);
return false;
});
<ul id="menu">
<li><a href="#item1">1</a></li>
<li><a href="#item2">2</a></li>
</ul>
<div id="item-1">placeholder-1</div>
<div id="item-2">placeholder-2</div>
Как вы видите, я беру href (#id) целевого элемента из ссылки меню и прокручиваю до целевого элемента.
Но проблема заключается в том, что у меня есть целевые элементы, идущие прямо к нижней части страницы, и когда страница прокручивается до последней, верхняя часть этого элемента не может прокручиваться до верхней части страницы, так как внизу страницы не хватает ... Имею ли я смысл?
Я пытаюсь найти решение с использованием css или jquery, которое будет означать, что независимо от высоты страницы (или отступа / поля внизу) элемент будет в верхней части области просмотра, когда элемент меню щелкают.
Можно ли добавить дополнительные отступы в зависимости от высоты области просмотра, используя JavaScript? Использую ли я какой-нибудь трюк с переполнением?