Javascript 无法读取属性'；顶部'；未定义的。头版

我正在尝试制作一个面包屑，在其中单击，它会将动画滚动到目标选项，但每次单击时都会出现下一个控制台错误

无法读取未定义的属性“top”

以下是我的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>

Índice
1历史博物馆：





2 a：














3个子系统：

.attr

仅提供

id

，而不提供

。因此，在与jQuery选择器一起使用时，需要手动附加

#

，如下所示

---

var targetOffset=$（“#”+targetName）.offset（）.top

属性

id

包含例如

actualdad

因此

targetName

将包含

actualdad

和您的：

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

将导致：

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

但是在您的文档中没有带有标记名的元素

actualidad

，您必须编写

$（'#'+targetName）.offset（）.top

因此搜索ID为

的元素

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

var target = $(selector);
var targetOffset;

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

---

试着调试你的代码。你能解释一下为什么这个问题应该被否决吗？