滚动到模态窗口内的元素

Bob*_*obB 9 javascript jquery modal-dialog twitter-bootstrap-3

我有一个模态窗口,需要能够打开模态,然后将用户滚动到模态中的特定位置.我用ajax到php脚本获取模态内容.

例如mypage.php?loc = someid

在php脚本中我有这个js来做滚动:

$( document ).ready(function() {
 $('.modal-body').animate({
    scrollTop: $("#<?php echo $_GET['loc'];?>").offset().top
 }, 1000);
});
Run Code Online (Sandbox Code Playgroud)

在PHP页面是一些像这样的HTML:

<div id="someid"></div>
Run Code Online (Sandbox Code Playgroud)

我的内容正确加载,但发生的滚动量似乎是相对于打开模式的链接,所以它实际上并没有在文档中找到div.我猜我的js需要一点点调整.

我似乎需要能够从模态内容的顶部计算元素的偏移量.

我可以通过设置我正在滚动的元素的值来伪造这个.但我真的需要一种计算方法来计算它.显然,如图所示,不同的设备将无法正常工作.

$( document ).ready(function() {
 $('.modal-body').animate({
    scrollTop: $("#<?php echo $_GET['loc'];?>").attr('distance')
 }, 1000);
});
//Trying to find out how far this div is from the top of the modal window?
<div id="someid" distance="670"></div>
Run Code Online (Sandbox Code Playgroud)

谢谢任何有良好解决方案的人!

所以我找到了解决方案:

$( document ).ready(function() {
 $('.modal-body').animate({
    scrollTop: $("#<?php echo $_GET['loc'];?>").offset().top
 }, 1000);
});
Run Code Online (Sandbox Code Playgroud)

Rob*_*cey 3

用户找到了解决方案,但似乎没有添加它,因此为了完整起见,这里是

$( document ).ready(function() {
        setTimeout(function() {
            var $el = $("#<?php echo $_GET['loc'];?>")
            var elpos = $el.position();

            $('.modal-body').animate({
                scrollTop: elpos.top
            }, 1000);

        },500);
    });
Run Code Online (Sandbox Code Playgroud)