Issue getting web page to start from the Bottom of the screen once loaded

user_7253215 0
Viewed 96

I'm currently using HTML, CSS, & JavaScript while working on a simple website, and the idea is essentially a story that starts from the bottom at the bottom of the page, and the reader must then scroll up to the very top while reading. Once they reach the top of the page, the reader would then scroll back down to continue reading the story.

Within my HTML main, I've added two types of div classes for the text that should appear on the screen while the reader is scrolling up, and when they scroll back down once reaching the top:

To appear while scrolling up: 

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

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

</div>

To appear while scrolling down:

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

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

</div>

Scrolling from the bottom of the page going up should display part 1, & once at the top scrolling back down should start displaying part 2.

The Javascript I'm using within my HTML main is the following: 

 <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>

The issues I'm experiencing are the following:

  1. The page doesn't load from the bottom. it loads just above halfway up the page. So I'd have to scroll back down to the bottom which isn't ideal for the idea of the website.

  2. Once I reach the top of the page, when I scroll back down, part 2 content doesn't appear. instead, all text that should appear is nonexistent.

Regarding CSS for the text, I've used the following for text which should appear while scrolling to the top: 

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

The only addition to the CCS above that's been added to text while scrolling down is the following: 

visibility: hidden;

I added the hidden tag because if Part 2's text appears while scrolling up & while scrolling down.

How can I get part 2's text to appear properly once I've reached the top & start scrolling down. Also, How can I get the page to start from the bottom once it's loaded.

Any help is appreciated! 

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>

css html jquery javascript
1 Answers

When your code is using document.body.scrollHeight it is only set to 30px.

You can use the top value of your element though:

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

As for the onscroll event, I would suggest putting that in a function and then calling the function at the end of your 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();
    });

and then create the setScroll function:

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