Question

我试图在你点击的地方做一个面包屑，然后选择滚动动画到目标，但每次点击都会出现下一个控制台错误Cannot read property 'top' of undefined
这是我的jquery代码：

$("ol#migas > li > span").click(function () {
        var targetName = $(this).attr("id");
        var targetOffset = $(targetName).offset().top;
            $("html, body").animate({
                scrollTop: targetOffset
            }, 1000)
})

这里是HTML：

<ol class="breadcrumb" id="migas">
    <h3>Índice</h3>
    <li class="nav-header">1 La historia del Wéstern:</li>
    <br>
    <li><span id="genero"><a href="javascript:void(0)"> 1.1 Género</a></span></li>
    <br>
    <li class="nav-header">2 Historia:</li>
    <br>
    <li><span id="origen"><a href="javascript:void(0)"> 2.1 Origen</a></span></li>
    <br>
    <li><span id="oro"><a href="javascript:void(0)"> 2.2 Edad de oro</a></span></li>
    <br>
    <li><span id="decadencia"><a href="javascript:void(0)"> 2.3 Decadencia</a></span></li>
    <br>
    <li><span id="actualidad"><a href="javascript:void(0)"> 2.4 Actualidad</a></span></li>
    <br>
    <li class="nav-header">3 Subgéneros:</li>
    <br>
    <li><span id="spa"><a href="javascript:void(0)"> 3.1 Spaghetti wéstern</a></span></li>
    <br>
    <li><span id="crep"><a href="javascript:void(0)"> 3.2 Wéstern crepuscular</a></span></li>
    <br>
</ol>

Answer 1

属性id包含例如actualidad因此targetName将包含actualidad和您的：

var targetName = $(this).attr("id");
var targetOffset = $(targetName).offset().top;

将导致：

$('actualidad').offset().top;

但是文档中没有标记名称 actualidad的元素，您必须编写$('#'+targetName).offset().top;，因此请搜索ID为actualidad的元素

要查找此类问题，您应该检查jQuery结果集的内容：

var target = $(selector);
var targetOffset;

if( target.length > 0 ) {
   targetOffset = target.offset().top;
} else {
   console.error('Not element found for selector: '+selector);
}

Answer 2

.attr仅提供id而不包含#。因此，当使用jQuery选择器（如下面的

）时，您需要手动附加#

var targetOffset = $("#"+targetName).offset().top;

无法读取未定义的属性“top”。 ScrollTop问题

2 个答案: