Javascript 如何在MVC ASP.NET中重新加载页面时在特定位置滚动页面

这是ASP.NET MVC项目，我在页面的特定位置放置了一个

div

，并添加了id

dealProductAnchor

。当此页面正常加载或重新加载时，其行为与正常一样，但当单击特定按钮时，我希望在完成所有回发进度后，当页面加载完成时，该页面会转到该div的位置

使用java脚本，我尝试了这一点，但什么也没做。服务器端或客户端的任何解决方案都是值得赞赏的

$(".button-1").click(function () {
        if (localStorage && !localStorage.getItem('click')) {
            localStorage.setItem('click', true);
        }
    });


$(document).ready(function () {
    if (localStorage.getItem('click') == true) {

        window.location = window.location.href + "#dealProductAnchor";
        //click = false;
    }
     });

你能试试这个吗

$(".button-1").click(function () {
$('html, body').animate({
        scrollTop: $("#dealProductAnchor").offset().top
    }, 2000);

});

---

如果您想通过后端实现这一点，可以在

ViewBag

中设置一个值，并在

.cshtml

页面上进行检查，如下所示：

控制器代码：

 public ActionResult TextAction() {
// Do your Logic here
        ViewBag.testValue = "test";
        return View();
    }

$(document).ready(function () {
@if (ViewBag.testValue == "test") {
        <text>$('html,body').animate({
            scrollTop: ($("#dealProductAnchor").offset().top) - 200
        }, 'slow');</text>
    }
});

JavaScript代码：

 public ActionResult TextAction() {
// Do your Logic here
        ViewBag.testValue = "test";
        return View();
    }

$(document).ready(function () {
@if (ViewBag.testValue == "test") {
        <text>$('html,body').animate({
            scrollTop: ($("#dealProductAnchor").offset().top) - 200
        }, 'slow');</text>
    }
});

$（文档）.ready（函数（）{
@如果（ViewBag.testValue==“测试”）{
$（'html，body'）。设置动画({
scrollTop:（$（“#dealProductAnchor”）.offset（）.top）-200
}“慢”）；
}
});

希望它能帮助您：）

而不是设置：

window.location = window.location.href + "#dealProductAnchor";

在

$（文档）.ready

回调中，使用Javascript设置scrolltop：

$(document).ready(function () {
    if (localStorage.getItem('click') == true) {
        $('body').scrollTop($("#dealProductAnchor").offset().top)
        localStorage.removeItem('click');
    }
});

如果不起作用，您可能需要添加一个

窗口.setTimeout（）

包装器，以允许浏览器完成渲染：

$(document).ready(function () {
    if (localStorage.getItem('click') == true) {
        window.setTimeout(function() {
            $('body').scrollTop($("#dealProductAnchor").offset().top);
        });
        localStorage.removeItem('click');
    }
});

---

我将尝试更改表单操作属性以包含哈希

$(".button-1").click(function () {
    //Change $("form") to use the form ID if you have one
    $("form").attr("action", $("form").attr("action") + "#dealProductAnchor" );
}

---

如果按钮正在提交表单，您可能需要将按钮从submit更改为button，然后在单击处理程序中提交表单。

这将在页面加载前显示，我希望在页面加载后显示该位置这将在我访问该页面时显示，我只希望在单击按钮时显示。我不会每次都单击OK，然后您可以跳过

$（document）.ready（函数（）{$（“.button-1”）.trigger（“click”）；}）此块。之后，当您单击按钮1时，页面将滚动到pertical div。当我单击按钮时，它将执行一些后端操作并重新加载页面，当重新加载完成时，我希望该位置。上面的代码会在页面加载之前将我带到那里。您是否调用后端操作？显示代码尽管我不得不根据自己的情况进行调整，但这个答案让我找到了我一直在寻找的解决方案。我尝试了这两种方法。在控制台中，click设置为true，但当
$（document）.ready（函数（）
调用启动时，它不会进入if块内部，即使localStorage是trueAhh…等等，getItem的结果始终是字符串！您的检查应该是：localStorage.getItem（'click'）=“true”