javascript - 加载网页后从屏幕底部开始出现问题

Question

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

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

向上滚动时出现:

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

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

</div>

向下滚动时出现:

<div class="part-2 para-ten">  

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

</div> 

从页面底部向上滚动应显示第 1 部分，到达顶部后向下滚动应开始显示第 2 部分。

我在 HTML main 中使用的 Javascript 如下:

 <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

    <script>

        var started = false; // Set a variable so we can tell if the page has scrolled to the bottom
        var changed = false; // Set a variable so we can tell if the page has changed to the second part


        // This is the Jquery bit.... sroll to the bottom once the page has loaded
        $(document).ready(function(){
            window.scrollTo(0, document.body.scrollHeight); 
            started = true; // set our started variable to true so we know the page has scrolled
        });



        // This is a function – we will run this every time the page scrolls
        function checkScroll() { 
            //check to see if the scroll position is more than 100 but less than 300 and if the story has started
            if ( window.scrollY > 100 && window.scrollY < 300 && started == true) {  
                $('.part-1').css('display', 'none'); // hide all elements with class part-1
                $('.part-2').css('display', 'block'); // show all elements with class part-2
                changed = true;
            } else { 
                 //do nothing
            }
        }


        // Run the function every time the page is scrolled
        window.onscroll = function() {
            checkScroll();
        };  



    </script>

我遇到的问题如下:

1. 页面不会从底部加载。它加载到页面中间的上方。所以我必须向下滚动到底部，这对于网站的想法来说并不理想。

2. 到达页面顶部后，当我向下滚动时，第 2 部分内容不会出现。相反，所有应该出现的文本都不存在。

关于文本的 CSS，我对滚动到顶部时应显示的文本使用了以下内容:

.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;
    }

向下滚动时添加到文本中的上述 CCS 的唯一补充如下:

visibility: hidden;

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

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

感谢任何帮助!

var started = false; // Set a variable so we can tell if the page has scrolled to the bottom
var changed = false; // Set a variable so we can tell if the page has changed to the second part


// This is the Jquery bit.... sroll to the bottom once the page has loaded
$(document).ready(function() {
  window.scrollTo(0, document.body.scrollHeight);
  started = true; // set our started variable to true so we know the page has scrolled
});



// This is a function – we will run this every time the page scrolls
function checkScroll() {
  //check to see if the scroll position is more than 100 but less than 300 and if the story has started
  if (window.scrollY > 100 && window.scrollY < 300 && started == true) {
    $('.part-1').css('display', 'none'); // hide all elements with class part-1
    $('.part-2').css('display', 'block'); // show all elements with class part-2
    changed = true;
  } else {
    //do nothing
  }
}


// Run the function every time the page is scrolled
window.onscroll = function() {
  checkScroll();
};

.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;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<div class="part-1 para-one">
  <pre> 
    PART 1 CONTENT DISPLAYS HERE
    </pre>
</div>


<div class="part-2 para-ten">
  <pre>
    PART 2 CONTENT DISPLAYS HERE  
       </pre>
</div>

Answer 1

当您的代码使用 document.body.scrollHeight 时，它仅设置为 30px。

您可以使用元素的顶部值:

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

至于 onscroll 事件，我建议将其放入一个函数中，然后在 document.ready 末尾调用该函数。

   $(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();
    });

然后创建setScroll函数:

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