Question

我有一个页面显示由webmethod填充的产品目录。当用户点击图像时，他将重定向到详细信息页面。当用户返回目录ID时，如访问过的产品页面滚动底部

我怎样才能完成这个

我的HTML

<div class="articoli">
 </div>

我的javascript

<script>
$(document).ready(function () {
    var Skip = 9;
    var Take = 9;

    function Load(Skip, Take) {
        $('#divPostsLoader').html('<img src="Images/loading.gif" height="100" />');

        $.ajax({
            type: "POST",
            url: "page.aspx/LoadProduct",
            data: "{ Skip:" + Skip + ", Take:" + Take + " }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data != "") {
                    //accodo dati a div
                    $('.articoli').append(data.d);
                }
                $('#divPostsLoader').empty();

            },

            error: function () {
                alert('error');
            }
        })
    };

    $(window).scroll(function () {
        if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
            Load(Skip, Take);
            Skip = Skip + 9;
        }
    });
});

我的c＃webmethod

[System.Web.Services.WebMethod]
public static string LoadProduct(int Skip, int Take)
{
    StringBuilder GetProduct = new StringBuilder();

    MyDataBaseEntities db = new MyDataBaseEntities();
    var prod = (from a in db.TAB
                select a).Skip(Skip).Take(Take);

    foreach (var a in prod)
    {
        var Codart = a.Codart;
        var Prezz = a.Prezz;
        var pathimg = a.pathimg;

        GetProduct.Append("<div class=\"col-md-4\">");
        GetProduct.Append("<div class=\"col-md-6 text-left\">");
        GetProduct.AppendFormat(string.Format("<a href='Details.aspx?Articolo={0}' class=\"codart\" >", Codart));
        GetProduct.AppendFormat("<span class=\"codart\">{0}</span>", Codart);
        GetProduct.Append("</a>");
        GetProduct.Append("</div> ");
        GetProduct.Append("<div class=\"col-md-6 text-right\" style=\"color:gray;font-size:large;\">");
        GetProduct.AppendFormat(string.Format("{0:c}",  Prezz));
        GetProduct.Append("</div> ");
        GetProduct.AppendFormat(string.Format("<a href='Details.aspx?Articolo={0}' class=\"codart\" >", Codart));
        GetProduct.AppendFormat(string.Format("<img src='{0}' class='img-responsive MyImage' alt='{1}'/>", pathimg, Codart));
        GetProduct.Append("</a>");
        GetProduct.Append("</div> ");
    }
    return GetProduct.ToString();
}

如何在页面加载时滚动底部？

Answer 1

尝试将ID添加到要滚动到的项目中。然后，您可以根据您想要解决的方式，通过脚本href或分配所述Id来启动滚动。 Here您可以使用组件的ID来查看有关如何滚动到页面特定部分的更多详细信息。

我会为列表中的每个项目添加唯一ID。然后我会编写一个脚本来读取/设置要滚动到的项目的变量。请注意，我是一时兴起写的，所以你可能需要纠正或改变它以满足你的需要。

您可以使用this使用jquery保存和读取Cookie。

脚本可能是这样的：

var scrollToId;

$(document).ready(function () {
    var cookie = $.cookie('last_clicked_id');
    if (cookie != '') {
        scrollToId = cookie;
    } else {
        scrollToId = '#';
    }
    $("html, body").animate({ scrollTop: $(scrollToId).offset().top }, 1000);
});

$('.productItemClass')
    .on('click',
        function() {
            $.cookie('last_clicked_id', $(this).attr('id'));
        });

Answer 2

使用它并设置变量sc

var sc;
var scroll;
var loop = setInterval(function() {
sc = window.scrollTop;
if (scroll === null) {
localstorage.setItem("bgc", sc);
}
}, 10);
window.onload = function() {
scroll = localstorage.getItem("bgc");
 if (scroll !== null) {
 window.scollTop = scroll + "px";
 }
 }

Asp.net webform infinity scroll

2 个答案: