Доброго времени суток!
Хочу реализовать плавный скрол до элемента через ссылки с якорями. Но когда высчитываю при клике координаты ссылки с якорем, то возвращаются разные результаты. Если функция начинает расчет когда я нахожусь в самом верху документа, то результаты возвращаются верные и скролиться все хорошо, но если я нахожусь не в самом верху, то координаты получаются совсем другие и они зависят от того где сейчас находиться мой вьювпорт. Если я нахожусь непосредственно на элементе с якорем, то при клике на ссылку, функция видает координаты 0 и скролит просто к началу документа.
Вот первый способ расчета -
function smooth_scroll() {
$('a.item_link').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
}
Вот второй -
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect()
var body = document.body
var docElem = document.documentElement
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
var clientTop = docElem.clientTop || body.clientTop || 0
var clientLeft = docElem.clientLeft || body.clientLeft || 0
var top = box.top + scrollTop - clientTop
var left = box.left + scrollLeft - clientLeft
return { top: Math.round(top), left: Math.round(left) }
}
Оба способа возвращают одинаковые результаты
Может кто стыкался с подобным и знает в чем проблема? Fixed стоит на родителе ссылки, а все якоря находятся в reletive родителях. Хотя я уже пробовал убирать все позиционирования.
Простой