使用jQuery实现Checkbox List滚动到指定项的错误排查与修复

咱们来拆解你遇到的两个核心问题，一步步解决：

第一个错误：无法获取未定义或null引用的属性“top” #

这个报错的直接原因有两个：

1. 你的jQuery选择器写法错误：$('#"' + word + '"')会生成类似$("#"txxx@soxsa.co.za"")的无效格式，引号嵌套混乱，浏览器根本识别不了。
2. ASP.NET服务器控件的ID会自动生成前缀，比如chkEscalationList里的选项，前端渲染后的ID是chkEscalationList_0、chkEscalationList_1这类格式，绝对不会是你传递的邮箱地址，所以就算选择器写法正确，也找不到目标元素。

第二个问题：修改后滚动仍失效 #

本质还是元素匹配逻辑错误——你试图用邮箱地址匹配元素ID，但ID和邮箱完全不相关，自然找不到要滚动的项。

正确的解决步骤 #

1. 给CheckboxList选项添加自定义标识属性

在后台绑定chkEscalationList时，给每个ListItem添加data-email属性，把邮箱地址存进去，让前端可以通过这个属性精准定位：

// 假设你从数据源获取用户数据，示例绑定代码如下
foreach (var user in yourUserDataSource)
{
    string email = user.EmailAddress.ToLower().Trim();
    string displayText = $"{email} {user.Name}";
    ListItem li = new ListItem(displayText, email);
    // 添加自定义数据属性，用于前端查找
    li.Attributes.Add("data-email", email);
    chkEscalationList.Items.Add(li);
}

2. 修正滚动逻辑（两种方案可选）

方案A：保留后台回发（适合需要在后台记录选中字母的场景）

修改后台rpAlphabetList_ItemCommand的脚本注册逻辑，确保传递正确的邮箱地址，再修正前端函数：

protected void rpAlphabetList_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    string letterVal = e.CommandArgument.ToString().ToLower();
    string targetEmail = null;
    // 找到第一个匹配的邮箱
    foreach (ListItem li in chkEscalationList.Items)
    {
        string email = li.Value.ToLower().Trim();
        if (email.StartsWith(letterVal))
        {
            targetEmail = email;
            break;
        }
    }
    if (!string.IsNullOrEmpty(targetEmail))
    {
        string sScript = $"scrollToPerson('{targetEmail}');";
        ScriptManager.RegisterClientScriptBlock(this, GetType(), "focusScript", sScript, true);
    }
}

前端滚动函数：

function scrollToPerson(targetEmail) {
    // 通过data-email属性定位目标项
    const $targetItem = $('.CheckBoxList [data-email="' + targetEmail + '"]');
    if (!$targetItem.length) {
        console.log("未找到匹配的联系人");
        return;
    }
    // 滚动容器是#escPersList，不是#MyDiv
    const $container = $('#escPersList');
    // 计算正确的滚动位置：目标元素相对容器的顶部偏移 + 容器当前滚动距离
    const scrollPosition = $targetItem.position().top + $container.scrollTop();
    // 执行平滑滚动动画
    $container.animate({ scrollTop: scrollPosition }, 300);
}

方案B：完全前端处理（更高效，无页面回发）

如果不需要在后台记录选中字母，建议直接把字母点击改成前端事件，避免页面回发：

• 给lvLetters添加OnItemDataBound事件，在后台给每个字母按钮绑定前端点击逻辑：

protected void lvLetters_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        LinkButton lnk = e.Item.FindControl("lnkSelectAlphabet") as LinkButton;
        if (lnk != null)
        {
            string letter = lnk.Text.ToLower();
            // 绑定前端点击事件并阻止默认回发
            lnk.OnClientClick = $"scrollToLetter('{letter}'); return false;";
        }
    }
}

• 新增前端滚动函数：

function scrollToLetter(letter) {
    const $container = $('#escPersList');
    // 找到第一个以指定字母开头的邮箱项
    const $targetItem = $('.CheckBoxList [data-email^="' + letter + '"]').first();
    if (!$targetItem.length) {
        console.log(`未找到以${letter}开头的联系人`);
        return;
    }
    const scrollPosition = $targetItem.position().top + $container.scrollTop();
    $container.animate({ scrollTop: scrollPosition }, 300);
}

额外注意点 #

• 调整#escPersList的CSS样式：当前max-height:20px; height:200px存在矛盾，建议改成height:200px; overflow-y:auto，确保滚动容器正常工作。
• 如果使用UpdatePanel异步回发，ScriptManager的脚本注册方式是正确的，能保证脚本在异步回发后正常执行。

内容的提问来源于stack exchange，提问作者Kerieks