jquery - 转到页面上的元素 ID（由 jquery 创建）答案

【问题标题】：jquery - Goto element ID (which is created by jquery) on pagejquery - 转到页面上的元素 ID（由 jquery 创建）
【发布时间】：2015-10-12 22:16:57
【问题描述】：

我在这里遇到问题：我有一个这样的 URL：

products.php?community=2#1855

我有一个像这样的元素：

<div id="1855"></div>

id 为 1855 的元素正在由 jquery 创建。

无论如何，当我加载这个页面时，页面并没有转到那个 id。这是因为元素是由 jquery 创建的吗？如果是这样，有没有人知道我可以在创建后转到该 id？

我试过了：

$("html, body").animate({ scrollTop: $('#1855').offset().top }, 1000);

但出现此错误：

Uncaught TypeError: Cannot read property 'top' of undefined

【问题讨论】：

听起来像是时间问题？
你能展示你如何将元素添加到 dom 中吗？
试试这个stackoverflow.com/questions/4565381/… ?
我通过$('#listings').html(html);将元素添加到dom中
它被一个文档包围了。准备好了吗？

标签： jquery

【解决方案1】：

如果您的文档是动态填充的，我认为最好的解决方案是添加一些代码来检查是否在您添加新元素时创建了锚引用的元素，并在它存在时滚动到它。

如果这不可行，另一种解决方案是挂钩 DOM 更改事件并检查锚点中引用的元素是否存在。但是，这在旧浏览器（包括 IE9）上并不可靠。

navigatedToAnchor = false;
$(document).on('DOMSubtreeModified', function () {
    var anchorIndex = document.URL.lastIndexOf('#');
    if (!navigatedToAnchor && anchorIndex !== -1) {
        var anchorSelector = document.URL.substring(anchorIndex);
        var anchorElement = $(anchorSelector);
        if (anchorElement.length > 0) {
            $('html, body').animate({ scrollTop: anchorElement.offset().top }, 1000);
            navigatedToAnchor = true;
        }
    }
});

【讨论】：

【解决方案2】：

您似乎遇到了 DOM 准备问题。

首先要做的是将你的行换行以滚动：

$("html, body").animate({ scrollTop: $('#1855').offset().top }, 1000);

像这样：

$(document).ready(function(){
/* dom is ready, scroll here */
$("html, body").animate({ scrollTop: $('#1855').offset().top }, 1000);
})

【讨论】：

【解决方案3】：

会发生什么是 url:

products.php?community=2#1855

它是在 jQuery 对象存在之前生成的，证明它有效的一种方法是这样做：

setTimeout(function(){
    $("html, body").animate({ scrollTop: $('#1855').offset().top }, 1000);
},500);

当你运行这个函数时，这将使 jQuery 对象存在。

注意：此示例供您尝试。

【讨论】：

【解决方案4】：

选择器似乎找不到元素。添加新元素后，您需要为 scrollTop 设置动画。像这样的：

$('#listings').html(html);
$("html, body").animate({ scrollTop: $('#1855').offset().top }, 1000);

【讨论】：