Question

我在这里遇到问题：我有一个像这样的网址：

products.php?community=2#1855

我有一个像这样的元素：

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

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

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

我试过了：

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

但得到了这个错误：

Uncaught TypeError: Cannot read property 'top' of undefined

Answer 1

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

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

Answer 2

网址：

会发生什么

products.php?community=2#1855

它是在jQuery对象存在之前生成的，一种证明它可行的方法是：

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

这将使您在运行此函数时存在jQuery对象。

注意：此示例供您试用。

Answer 3

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

如果这是不可能的，另一个解决方案是挂钩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;
        }
    }
});

Answer 4

您似乎有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);
})

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

4 个答案: