-3

I want to make an object visible when user goes to its location in an HTML document

When user scrolled to bottom (Or typed 'pagename.html#bottom' on URL bar) bottom <div> should be visible. How to write a code for this using html, css and javascript?

Here is an example page

<div id="top">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="bottom" style="visibility:hidden">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
VXp
  • 11,598
  • 6
  • 31
  • 46
Shon Max
  • 49
  • 1
  • 1
  • 10

3 Answers3

0

Do like this using window.location.hash

Explanation

  1. window.location.hash is pick the data of the hash value from the url html#bottom.its just get #bottom.
  2. Then target the element with id name document.querySelector('#bottom')
window.onload = function() {
  document.querySelector("'" + window.location.hash + "'").style.visibility = 'visible';
}
prasanth
  • 22,145
  • 4
  • 29
  • 53
  • I can't understand the code bro. Can you make it complete with codes i entered at question for understand it easy? – Shon Max Jan 10 '18 at 13:35
0

First of all your body should be scrollable.

You can acheive it by setting the overflow property

  body {
        overflow: auto;
  }

Now to check if the element is visible in the viewport or not.

You have to use the scroll event. The scroll event fires when you scroll on the body.

    $('body').scroll(function(event) {
            if($('#bottom').offset().top < window.innerHeight) {
                  $('#bottom').css('visibility', 'visible');
            }
    });

Javascript: 

   window.addEventListener('scroll', function(e) {
        if(document.getElementById('bottom').offsetTop < window.innerHeight) {
              document.getElementById(bottom).style.visibility = 'visible';
        }
   }
subodhkalika
  • 1,964
  • 1
  • 9
  • 15
0

solution with jquery; 

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
        $( document ).ready(function() {
            $("#bottom").hide();
            console.log( "ready!" );
        });     
        document.onscroll = function() {
        if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight)
        {
            console.log("scrolled");
            alert("scrolled to bottom");
            $("#bottom").show();
        }

    }
        </script>
    </head>
    <body>
        <div id="top">
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. I am the last statement before reaching bottom.
            </P>
        </div>



        <div id="bottom">
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. i am in the bottom.
            </P>
        </div>
    </body>
    </html>
Sunny
  • 577
  • 6
  • 20