将第一次出现滚动到 div 内的顶部位置

Question

点击导航到另一个页面的链接后，我必须滚动“tbody” div 顶部的第一个（最早的）警报事件（标记为红色文本）。每行都有id='tab_content' 和一个表数据class = 'td_list_row_center'。当警报发生时，tds 的颜色会从黑色变为红色，并且名称为class = 'td_list_row_center font-red"。

我已尝试处理红色事件，如果发现，请在“tbody”div 的顶部滚动。第二行应为黑色字体（非报警）

<script>
    function scrollToFirstRedAlarmOccurence(red_occurrence) {
        $('tbody').animate({
            scrollTop: red_occurrence.offset().top
        }, 2000);
    }

    var red_occurrence = document.getElementsByClassName("td_list_row_center font-red");

    if(red_occurrence)
        scrollToFirstRedAlarmOccurence(red_occurrence);
    else
        null
</script>

点击链接并显示表格后，没有任何反应（如脚本不起作用）。我希望它从一个巨大的数据集中滚动到第一个红色事件。在我向上滚动表格后，我会看到另一个后来的红色事件。实际和预期结果如下图：

[实际资源] -> https://ibb.co/1zn4ty9
[预期结果] -> https://ibb.co/Jy6FrL6

Answer 1

“getElementsByClassName”的参数不正确。如下使用它们。

<script>
  function scrollToFirstRedAlarmOccurence(red_occurrence) {
    // make jQuery object for first element
    $('tbody').animate({
      scrollTop: $(red_occurrence[0]).offset().top,
    }, 2000);
  }
  setTimeout(() => {
    // select "font-red" classed elements
    var red_occurrence = document.getElementsByClassName("font-red"); // you can use jQuery selector too
    if(red_occurrence.length) { // check for array length
      scrollToFirstRedAlarmOccurence(red_occurrence);
    }
  }, 1000); // wait for DOM to render
</script>

基本上，您可以调试代码以检查它们是否获得正确的值。我做了一些更正，这对你的情况有用。