Javascript 问题：加载后，如何使网页从屏幕底部开始

我目前在一个简单的网站上使用HTML、CSS和JavaScript，这个想法本质上是一个从页面底部开始的故事，读者在阅读时必须向上滚动到最顶部。一旦到达页面顶部，读者就会向下滚动继续阅读故事

在我的HTML main中，我为文本添加了两种类型的div类，当读卡器向上滚动时，文本应显示在屏幕上，当它们到达顶部后向下滚动时，文本应显示在屏幕上：

要在向上滚动时显示：

<div class="part-1 para-one">

<pre> 
PART 1 CONTENT DISPLAYS HERE
</pre>

</div>

在向下滚动时添加到文本中的CCS的唯一新增内容如下：

visibility: hidden;

   $(document).ready(function(){
         var p = $(".part-one").position();
         window.scrollTo(0, p.top);
         started = true; // set our started variable to true so we know the page has scrolled
         setScroll();
    });

我添加了隐藏标记，因为如果第2部分的文本在上下滚动时出现

当我到达顶部并开始向下滚动时，如何使第2部分的文本正确显示。此外，如何让页面在加载后从底部开始

感谢您的帮助

var start=false；//设置一个变量，这样我们就可以知道页面是否已滚动到底
var changed=false；//设置一个变量，这样我们就可以知道页面是否已更改为第二部分
//这是Jquery位。。。。加载页面后，滚动到底部
$（文档）.ready（函数（）{
scrollTo（0，document.body.scrollHeight）；
started=true；//将started变量设置为true，这样我们就知道页面已滚动
});
//这是一个函数–我们将在每次页面滚动时运行此函数
函数checkScroll（）{
//检查滚动位置是否大于100但小于300，以及故事是否已开始
如果（window.scrollY>100&&window.scrollY<300&&started==true）{
$（'.part-1'）.css（'display'，'none'）；//使用类part-1隐藏所有元素
$（'.part-2'）.css（'display'，'block'）；//使用类part-2显示所有元素
更改=正确；
}否则{
//无所事事
}
}
//每次滚动页面时运行该函数
window.onscroll=函数（）{
checkScroll（）；
};
。第一段{
位置：绝对位置；
顶部：8600px；
左：150px；
字体系列：lores-9宽，无衬线；
字号：700；
字体风格：普通；
颜色：#fff；
字号：12号；
}

第1部分的内容显示在这里
第2部分的内容显示在这里
当您的代码使用
document.body.scrollHeight
时，它仅设置为30px

您可以使用元素的最大值，但：

至于onscroll事件，我建议将其放在函数中，然后在文档末尾调用该函数

然后创建setScroll函数：

我给你编了一段。请回顾它正在做你想让我们看到的事情。我已经看过了。非常感谢。谢谢你的回答。我已经按照你的建议换了window.onscroll。然而，结果没有改变。知道为什么吗？@ALDNJML-Hmmm。。好的，等一下，我来摆弄一下。@ALDNJML更新了我的答案，你能试试看，告诉我是否有用吗？
.para-one {
        position: absolute;
        top: 8600px;
        left: 150px;
        font-family: lores-9-wide, sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #fff;
        font-size: 12pt;
    }

visibility: hidden;

var p = $(".part-one").position();
window.scrollTo(0, p.top);

   $(document).ready(function(){
         var p = $(".part-one").position();
         window.scrollTo(0, p.top);
         started = true; // set our started variable to true so we know the page has scrolled
         setScroll();
    });

function setScroll() {
  window.onscroll = function() {
        checkScroll();
  };  
}