jQuery - 在锚点单击时跳转到第一个 div 类

Question

我想使用 jQuery animate 跳转到页面上第一次出现的类，目前我正在使用一些基本代码，但是当我触发 onclick 事件时，控制台中出现错误。

这是我的带有 RAZOR 的 HTML：

@model List<Business.Models.InterviewCentres.InterviewCentresViewModel>
@{
    ViewBag.Title = "Index";
}
<h2>
    Interview Centre Bookings</h2>
<br />
The website is now showing dates between <b>@DateTime.Now.AddDays(21).ToShortDateString()</b>
and <b>@DateTime.Now.AddDays(92).ToShortDateString()</b>
@{
    string previousLocation = "";
}
<!-- get each unique location and add to list. Will use this to build clickable links -->
@{

    List<string> Locations = new List<string>();
}
@foreach (var item in Model)
{
    if (!Locations.Contains(item.Location))
    {
        Locations.Add(item.Location);
    }
}
<br />
@foreach (string location in Locations)
{
    <a href="#" class="lnkNav"><span style="color: #772432; border-bottom-style: dotted;">@Html.Raw(location)</span>
        &nbsp</a> 
}
@foreach (var item in Model)
{
    <table>
        <tr>
            <td>@Html.Label(item.CentreDateLocation)
            </td>
            <td>
                <a href="@Url.Action("InterviewCentreInfo", "InterviewCentres", new { date = item.DateOfInterview.ToString(), centre = item.Location })">
                    <img src="@Url.Content("~/Images/excel.gif")" alt="Export grid data to excel" />
                </a>
            </td>
        </tr>
    </table>

    <table>
        <tr>
            @foreach (var times in item.ListDateMemberNum)
            {
                if (previousLocation != item.Location)
                {
                    previousLocation = item.Location;
                <hr />
                }

                <td>
                <div class = "@item.Location.Trim()">
                    @if (times.MemberNumber == "")
                    {   <div style="background-color: rgb(242, 246, 243); display: inline-block; padding-top: 2px;
                        padding-left: 2px; padding-right: 2px; padding-bottom: 2px;">
                        @Html.Raw("&nbsp")
                        <img src="@Url.Content("~/Images/cross.gif")" alt="cross" />
                        @Html.Label(times.InterviewDate + " | ")
                    </div>
                    }
                    else
                    {
                        <div style="background-color: rgb(242, 246, 243); display: inline-block; padding-top: 2px;
                            padding-left: 2px; padding-right: 2px; padding-bottom: 2px;">
                            @Html.Raw("&nbsp")
                            <img src="@Url.Content("~/Images/tick.gif")" alt="tick" />
                            <a href="@Url.Action("LookupPassword", "Membership", new { MemberNum = times.MemberNumber })" style="background-color:Red; color:White;">@times.InterviewDate</a>
                        </div>
                    }
                    </div>
                </td>   
            }
        </tr>
    </table>
}

<script>
    $('.lnkNav').click(function () {
        var text = $(this).text();
        $('html,body').animate({
            scrollTop: $("." + text).offset().top
        },
        'slow');
    });
</script>

当我单击 .lnkNav 类的锚点时，我会得到单击的锚点的文本，这也是我要导航到的类的名称。但是它不起作用。我添加了一些屏幕截图来显示有带有文本的锚点和具有相同名称的类。有人知道我将如何实现吗？

Answer 1

首先，您应该检查$('.' + text ) 是否已定义。之后，您可以集中精力。

$('.lnkNav').click(function () {
    var text = $(this).text();
    if ($("." + text).length != 0) {
        $('html,body').animate({
                scrollTop: $("." + text).offset().top
            },
        'slow');
    } else {
        alert (" element not found!");
    }
});