子标题内的平滑滚动元素位于标题下方(Smooth scroll elements inside child div which is below header)

子标题内的平滑滚动元素位于标题下方(Smooth scroll elements inside child div which is below header)

所以这里是小提琴链接https://jsfiddle.net/malakar369/y5Lppeg0/8/

jQuery(document).ready(function ($) { $('.custom-click').on('click', function (e) { e.preventDefault(); var href = $(this).attr('href'); var current_div = $(href); var animateTo = $(href).position().top ; console.log(animateTo); $('#main-height-container').animate({scrollTop: animateTo},"slow"); }); });

如果我的div位于页面顶部，它就可以工作。 但是，由于它不是最重要的，我有大量的问题。 你们中的任何人都可以看看它并帮助我。

谢谢

So here is the fiddle link https://jsfiddle.net/malakar369/y5Lppeg0/8/

jQuery(document).ready(function ($) { $('.custom-click').on('click', function (e) { e.preventDefault(); var href = $(this).attr('href'); var current_div = $(href); var animateTo = $(href).position().top ; console.log(animateTo); $('#main-height-container').animate({scrollTop: animateTo},"slow"); }); });

It works if my div is at the top of the page. However, since it is not at the top i am having and extensive amount of issue. Could any of you guys could have a look at it and help me out.

Thanks

最满意答案

$（href）.position（）。top在窗口坐标中

尝试这个

var animateTo = $("#main-height-container").scrollTop() - $("#main-height-container").position().top + $(href).position().top;

https://jsfiddle.net/y5Lppeg0/9/

$(href).position().top is in window coordinates

Try this

var animateTo = $("#main-height-container").scrollTop() - $("#main-height-container").position().top + $(href).position().top;

https://jsfiddle.net/y5Lppeg0/9/