ASP.NET使用Response.Redirect跳转后滚动条回到顶部的问题

方案1：异步AJAX添加购物车（最优解） #

直接避免整页跳转，滚动位置完全不受影响，同时提升用户体验：

• 给商品的添加按钮绑定前端点击事件，阻止默认跳转行为
• 通过AJAX把商品ID传给后台完成购物车添加操作
• 操作完成后仅更新购物车相关UI（比如数量提示），无需刷新页面

前端示例（jQuery） #

$('.add-cart-btn').click(function(e) {
    e.preventDefault();
    const productId = $(this).data('product-id');
    
    $.post('CartHandler.aspx', { id: productId }, function(res) {
        // 更新购物车数量显示
        $('#cart-number').text(res.cartCount);
        // 可选：添加加入成功的提示
        alert('商品已加入购物车');
    });
});

后台处理页（CartHandler.aspx.cs） #

protected void Page_Load(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(Request.Form["id"]))
    {
        var productId = int.Parse(Request.Form["id"]);
        // 从Session获取购物车，不存在则初始化
        var cart = Session["ShoppingCart"] as List<int> ?? new List<int>();
        cart.Add(productId);
        Session["ShoppingCart"] = cart;
        
        // 返回购物车最新数量
        Response.Write("{\"cartCount\": " + cart.Count + "}");
        Response.End();
    }
}

方案2：记录滚动位置并跳转后恢复 #

如果必须保留整页跳转逻辑，可以通过URL参数传递滚动位置，在目标页面加载时恢复：

1. 前端点击时记录当前滚动条位置，和商品ID一起传入后台
2. 后台完成购物车操作后，跳转回商品页并带上滚动位置参数
3. 商品页加载时读取参数，设置滚动条位置

前端触发跳转代码 #

$('.add-cart-btn').click(function(e) {
    e.preventDefault();
    const productId = $(this).data('product-id');
    const scrollPos = window.pageYOffset; // 获取当前滚动位置
    // 跳转到后台处理页，携带商品ID和滚动位置
    window.location.href = "AddToCart.aspx?id=" + productId + "&scroll=" + scrollPos;
});

后台处理并跳转（AddToCart.aspx.cs） #

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.QueryString["id"] != null)
    {
        var productId = int.Parse(Request.QueryString["id"]);
        // 购物车添加逻辑
        var cart = Session["ShoppingCart"] as List<int> ?? new List<int>();
        cart.Add(productId);
        Session["ShoppingCart"] = cart;
        
        // 获取滚动位置参数
        var scrollPos = Request.QueryString["scroll"];
        // 跳转回商品页，携带滚动位置
        Response.Redirect($"shop.aspx?scroll={scrollPos}");
    }
}

商品页恢复滚动位置（shop.aspx前端） #

window.addEventListener('load', function() {
    const params = new URLSearchParams(window.location.search);
    const scrollPos = params.get('scroll');
    if (scrollPos) {
        window.scrollTo(0, parseInt(scrollPos));
    }
});

方案3：Server.Transfer替代Response.Redirect（有局限性） #

Server.Transfer是服务器端跳转，不会触发客户端重新请求，此时MaintainScrollPositionOnPostback="true"可能生效，但注意：

• 浏览器地址栏不会更新为目标页面URL
• 仅能在同一应用程序内跳转，且QueryString不会自动传递，需手动处理

示例代码：

// 完成购物车添加逻辑后
Server.Transfer("shop.aspx?id=2");

内容的提问来源于stack exchange，提问作者Eren