javascript - 使用 jQuery 滚动到复选框列表中的特定项目

Question

您好，我有一个用字母填充的 ListView 。单击字母时，它会在复选框列表中查找以字母开头的第一个单词。然后将复选框列表的值用作我必须滚动到的参数。

我创建了一个简单的 jsFiddle 来测试:

Checkbox list scroll to item

fiddle 工作正常。但是，在我的项目中出现以下错误:

    0x800a138f - JavaScript runtime error: Unable to get property 'top' of undefined or null reference

这是我在代码中所做的:

ASP.Net

    <div id="dialogEscalate" >
    <div id="MyDiv">
       <table>
        //other controls
        <tr>
            <td colspan="2">
                <asp:ListView ID="lvLetters" runat="server" DataKeyNames="Value" OnItemCommand="rpAlphabetList_ItemCommand">
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkSelectAlphabet" runat="server" Text='<%#Eval("Value")%>' CommandArgument='<%#Eval("Value")%>' ></asp:LinkButton>                               
                    </ItemTemplate>
                    <ItemSeparatorTemplate>|</ItemSeparatorTemplate>
                    </asp:ListView>
                <br />
            </td>
        </tr>
        <tr>
            <td  style="vertical-align:top;">
                <asp:Label ID="Label5" runat="server" Text="Escalate To: "></asp:Label>
            </td>
            <td>
                <div id="escPersList" style="max-height:20px; height:200px; width:100%; min-width:400px; overflow-y:scroll;" >
                    <asp:CheckBoxList ID="chkEscalationList" CssClass="CheckBoxList" RepeatDirection="Horizontal" OnSelectedIndexChanged="chkEscalationList_SelectedIndexChanged"
                    RepeatColumns="1" runat="server">
                    </asp:CheckBoxList>
                </div>                   
            </td>
        </tr>
        //other controls
        </table>
    <div>
    <div>

C#:(复选框列表值:EmailAddress 和文本:EmailAddress + Name

    private void GenerateAlphabets()
    {
        List<ListItem> alphabets = new List<ListItem>();
        ListItem alphabet = new ListItem();
       // alphabet.Value = "ALL";
        alphabet.Selected = alphabet.Value.Equals(ViewState["CurrentAlphabet"]);
        alphabets.Add(alphabet);
        for (int i = 65; i <= 90; i++)
        {
            alphabet = new ListItem();
            alphabet.Value = Char.ConvertFromUtf32(i);
            alphabet.Selected = alphabet.Value.Equals(ViewState["CurrentAlphabet"]);
            alphabets.Add(alphabet);
        }

        lvLetters.DataSource = alphabets;
        lvLetters.DataBind();
    }

这是当我点击字母时:

    protected void rpAlphabetList_ItemCommand(object sender, ListViewCommandEventArgs e)
    {
        DataKey key = lvLetters.DataKeys[e.Item.DisplayIndex];
        string letterVal = (string)key["Value"];

        letterVal = letterVal.ToLower();

        foreach (ListItem li in chkEscalationList.Items)
        {
            string val = li.Value.ToString().ToLower().Trim();

            if (val.StartsWith(letterVal))
            {
                string sScript = "scrollToPerson('" + val + "');";
                ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "focusScript", sScript, true);

                break;
            }
        }

    }

那么这是我的 jQuery:

    function scrollToPerson(word) {           
        var container = $('#MyDiv'),
        scrollTo = $('#"' + word + '"');

        container.animate({
            scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });

我在代码方面做错了什么？

------------更新------------应用以下解决方案后，滚动不起作用。通过代码端传递的值是电子邮件。因此，从列表中选择 T，它必须滚动到的列表中的第一个值是 t*****@soxsa.co.za。从 Chrome/IE 查看“昆虫页面”时，该特定控件的 ID 不同:

我只是 jquery 的初学者，但我认为不滚动的问题是我发送的值和元素 id 不同？

新的jQuery脚本如下:

   function scrollToPerson(word) {           
        var container = $('#escPersList'),
        scrollTo = $("'#" + word + "'");
        container.animate({ scrollTop: scrollTo.top });
    }

Answer 1

我认为这应该对你有用，除非它不是你的目标

container.animate({scrollTop:$('#"' + word + '"').top});

或者这应该是您所需要的。这用于页面滚动到该元素

$('html, body').animate({scrollTop:$('#"' + word + '"').top})