Javascript jQuery无法通过它找到元素'；s Id即使存在

我遇到了一个问题，jQuery似乎无法通过它的Id找到一个元素，即使它存在并且我似乎找不到任何问题

该页面列出了项目，每个项目都被包装在一个具有唯一Id的div中。每个项目上都有一个按钮，单击该按钮时，它将运行一个功能，将页面向下滚动到下一个项目

示例HTML就是这样，它列出了两个项目，它们都是从数据库加载的，由PHP动态生成以生成静态HTML（不是通过Ajax加载的，我知道这需要以不同的方式引用元素）

当我查看页面并单击按钮时，jQuery给出以下错误：

script.js:28未捕获类型错误：无法读取的属性“top” 未定义

我已经尝试将scrollToAnchor方法修改为以下内容，它似乎确认元素未找到，因为“未找到”显示在控制台中

function scrollToAnchor(id){
    var header = $('header');
    var tag = $('body').find(id);

    console.log("looking for " + id);

    if (tag.length) {
        console.log(id + " found");
    } else {
        console.log(id + " not found");
    }

    var pos = tag.offset().top - header.outerHeight();

    $('html,body').animate({scrollTop: pos},'fast');
}

---

我可能误解了，但如果您试图链接到页面中的某个部分，则根本不需要JQuery或JavaScript

例如：

第一节

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

第二节

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

第三节

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

第四节

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

您的代码

    $(document).ready(function(){
    $('.scrollable').click(function(){
        var href = $(this).attr('href');
        scrollToAnchor(href);

        return false;
    });
});

将返回a的href，该href为#公文包-25，请尝试将其替换为您的div id

。。。编辑

而不是这个

 <p class="button"><a class="scrollable" href="#portfolio-25">Next &nbsp;&nbsp;&nbsp;<span class="fa fa-angle-down"></span></a></p>

---

请考虑按您的要求编辑您的按钮，这只是例如。 我在你发布的HTML中找不到元素portfolio-25，所以这个错误很明显。您是在寻找“#project-25”吗？如上所述，HTML中没有

#portfolio-25

元素。然而，有一个项目-25，你是说这个吗？是的，这是一个无论你怎么努力都无法发现明显问题的日子。谢谢你指出这一点。哪一个错误？显然，将ID引用到标记属性中并通读它是不好的，但对代码的修改最少，因为他更喜欢硬涂层。按钮上的链接的href为#project-25，其想法是当单击按钮时，我们会得到href的值，因为这会告诉我们哪个项目是列表中的下一个项目。我们将href的值传递给scrollToAnchor函数，该函数应使用href的值来定位div#project-25，然后将滚动动画设置为该id。我可以看到您已将portfolio-25写入此代码

如果您提供了一个按钮，为什么需要锚定标记，您可以直接使用按钮并引用其名称…这不仅仅是链接到列表中的下一个项目的情况，当单击下一个按钮时，客户端希望页面向下滚动到下一个项目，我不是说“跳转”到下一个项目，我指的是动画“滚动”，因此使用jQuery来处理这个问题。在这种情况下，您只需要更正ID，因为它们似乎使用project，而锚标记指向portfolio。

    $(document).ready(function(){
    $('.scrollable').click(function(){
        var href = $(this).attr('href');
        scrollToAnchor(href);

        return false;
    });
});

 <p class="button"><a class="scrollable" href="#portfolio-25">Next &nbsp;&nbsp;&nbsp;<span class="fa fa-angle-down"></span></a></p>

<input type = 'button' class = 'scrollable' name = 'project-25' /> <i class = 'fa fa-angle-down'></i> Next

$(document).ready(function(){
    $('.scrollable').click(function(){
        var href = $(this).attr('name');
        scrollToAnchor(href);

        return false;
    });
});