MVC jQuery滚动到加载的部分视图

时间:2015-01-08 10:48:41

标签: javascript c# jquery asp.net-mvc-4

是否可以使用强制jQuery使用Easing插件向下滚动到已加载的局部视图?

目前我有一个包含搜索表单的视图,当用户输入条件并提交表单时,下面会加载部分视图和搜索结果。

目前,用户可以单击“结果”超链接,页面将向下滚动到相应区域,或者用户可以单击“搜索”超链接,页面将相应向上滚动。

我希望页面在加载部分视图(结果)后立即主动向下滚动,因为用户可以查看他们搜索的内容。

HTML

<li class="page-scroll"><a href=#search>Search</a></li>
<li class="page-scroll"><a href=#results>Results</a></li>

的jQuery

$(function() {
    $('.page-scroll a').bind('click', function(event) {
         var $anchor = $(this);
         $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
         }, 1500, 'easeInOutExpo');
         event.preventDefault();
     });
 });

查看

@{
    if (show)
    {
        Html.RenderPartial("~/Views/Home/Results.cshtml");
    }
}

部分视图

<section id="results">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2>Results</h2>
                <hr class="star-primary">
            </div>
        </div>
        <div class="col-lg-12">
            <table class="table table-striped table-bordered" id="example">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Postcode</th>
                </tr>
                </thead>
                <tbody>
                @Html.Raw(ViewBag.Search_DataTable)
                </tbody>
            </table>
        </div>
    </div>
</section>

非常感谢任何帮助: - )

0 个答案:

没有答案