javascript - 使用 javascript 设置 MVC View 页面加载时的页面滚动位置

Question

我一直在尝试在页面加载时自动转到网页底部。事实上，在 get 和 post 上，无论 View 如何被调用，它都必须自动转到页面底部。

我想用 JavaScript 来实现。

看起来很简单，我可以在这里轻松找到。嗯，看起来像这样:

Set page scroll position on page load of MVC app

只有一个问题...答案没有将 javascript 解决方案放在上下文中。如果没有上下文...我不知道将这些行放在哪里，无论我尝试什么...

我不会玩一整天来知道如何实现这一点，所以这里有一个上下文:

@model WhateverModelYouWant
@{
    ViewBag.Title = "Formulaire de reprise";
    Layout = "~/Views/Shared/_Layout.cshtml";
 }

<script type="text/javascript">
    document.getElementById("ImportantStuff").scrollIntoView();
</script>

<h2> TITLE OF THE VIEW <h2>

<div> Lots of content here </div>

<div> Even more content here </div>

<div id="ImportantStuff"> Important stuff here </div>

<input type="submit" value="ImportantButton" >

不用说，这不会使页面滚动到任何地方......提前致谢。

错误:

Answer 1

在您的示例中，无论如何都无法滚动任何内容，因为所有内容都在可见区域中。除此之外 mituw16 已经为您提供了正确的解决方案。以下是如何使用scrollIntoView函数的示例。

<script type="text/javascript">
        function scrollToImportantStuff() {
            document.getElementById('ImportantStuff').scrollIntoView()
        }
        window.onload = scrollToImportantStuff;
</script>
    
    <h2> TITLE OF THE VIEW <h2>

    <input type="button" onclick="document.getElementById('ImportantStuff').scrollIntoView()" value="Scroll ImportantStuff into View" />

    <div style="height:500px;"> Lots of content here </div>

    <div style="height:500px;"> Even more content here </div>

    <div id="ImportantStuff"> Important stuff here </div>