Question

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

例如mypage.php？loc = someid

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

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

php页面中的

是这样的一些HTML：

<div id="someid"></div>

我的内容正确加载但是发生的滚动量似乎是相对于打开模式的链接，所以它实际上并没有找到doc中的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>

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

所以我找到了解决方案：

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

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

        },500);
    });

Answer 1

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

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

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

        },500);
    });

Answer 2

由OP找到并由Rob Quincey转贴的解决方案效果很好，但是请记住，该位置给您相对于元素父元素的位置。

如果元素是裸露的<div>，则没问题，但是，如果祖父母元素具有某些边距或填充属性，则父元素的位置将被推到页面下方。这意味着该元素的位置也将被向下推。因此，为了使滚动正常工作，您需要添加父元素的位置，即：

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

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

        },500);
    });

然后，如有必要，沿着DOM树向上移动，直到到达通常是模式div的顶部元素。但是，您只需要解决具有一些高端边距或填充的元素。

滚动到模态窗口内的元素

2 个答案: