时间戳

首页 > 解决方案 > 加载后从屏幕底部开始获取网页的问题

javascript - 加载后从屏幕底部开始获取网页的问题

问题描述

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

在我的 HTML 主目录中，我添加了两种类型的 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 主文件中使用的 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>

标签： javascripthtmljquerycss

解决方案

当您的代码使用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();
  };  
}

推荐阅读