使用jQuery

时间:2018-01-09 08:50:17

标签: javascript c# jquery scroll

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

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

Checkbox list scroll to item

小提琴工作正常。但是,在我的项目中,我收到以下错误:

    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 +名称

    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()
        });

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

------------ UPDATE ------------ 应用以下解决方案后,滚动功能无效。 通过代码端传递的值是电子邮件。因此,从列表中选择T,它必须滚动到的列表中的第一个值是t*****@soxsa.co.za。查看&#34; Insect页面&#34;从Chrome / IE中,该特定控件的ID不同:

Element details

我只是一个jquery的初学者,但我认为不滚动的问题是我发送的值和元素ID不同?

新的jQuery脚本如下:

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

1 个答案:

答案 0 :(得分:1)

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

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

或者这应该是你需要的。这个页面滚动到该元素

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