Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you know the scroll bar has reached bottom of a page

Tags:

html

jquery

I have a HTML page, when the scroll bar reaches bottom of the page I need to slide in a div from bottom-right containing an iframe.

Using JQuery I have implemented the sliding effect for the div containing the iframe. At present the sliding is done by clicking a button(on button click event). How could I change this, so that when the scroll bar reaches bottom the div containing the iframe automatically slides in.

My HTML page code is

<style>
  .slide {
      background-color: #FFFFCC;
      border: 1px solid #999999;
      height: 900px;
      margin: 1em 0;
      overflow: hidden;
      position: relative;
      width: 100%;
    }
  .slide .inner {
      background: #44CC55;
      bottom: 0;
      /*height: 650px;*/
      height: auto;
      left: 0;
      padding: 6px;
      position: absolute;
      width: 650px;
      border: 1px solid red;
   }
</style>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
   $(document).ready(function(){

     $('#slidemarginleft button').click(function(){
       var $marginLefty = $(this).next();
       $marginLefty.animate({
        marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 1300 ? 655 : 1300
        });
     });
   });

 </script>

 <div id="slidemarginleft" class="slide">
   <button>slide it</button>
   <div class="inner" style="margin-left: 1300px;"><iframe width="600" scrolling="no" height="600" frameborder="0" src="http://google.com">
                                                                    </iframe></div>
 </div>
like image 241
Amal Kumar S Avatar asked Feb 20 '11 22:02

Amal Kumar S


People also ask

How do I know my scrollbar position?

To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.

How do you scroll to the bottom of a page?

Of course, you can also click and drag the scroll bar on the side of the page, but that's a slow and imprecise option–especially if you're using a laptop touchpad. No, by far the best way to jump to the top or bottom of a Web page is by tapping your Home or End key, respectively.

How to detect when scrollbar reaches the bottom of the page?

The JavaScript function presented in this page can be used to Detect when ScrollBar reaches the bottom of the page. This function is useful when you want to execute some JavaScript code when the user scrolls till the bottom of page, for example to display another content, making an infinite scroll. Here is the function, named whenScrlBottom ().

How to check if Scroll point has reached the page height?

You would to use the scroll function in jquery to check the position if it has reached document.height or window.height values. Something along the lines of this (I haven't verified it)

How to find the bottom of a scrolling container?

You find the height of the scrolling container, then compare that to the scroll position. If they are the same, then you have reached the bottom.

How to trigger an event when the user scrolled to bottom?

Sometimes you want to trigger an event, when the user has scrolled to the bottom of a page or a specific section. Scroll to bottom detection (works in all modern browsers, IE9 and up) window.onscroll = function() { if (window. innerHeight + window. pageYOffset >= document. body. offsetHeight) { alert("At the bottom!")


2 Answers

You would to use the scroll function in jquery to check the position if it has reached document.height or window.height values. Something along the lines of this (I haven't verified it)

$(window).scroll(function(){ 
   console.log($(window).scrollTop() == ($(document).height() - $(window).height()));
})
like image 121
prasanna Avatar answered Oct 11 '22 18:10

prasanna


$(window).scroll(function(){ // each time the scroll event is triggered
    if($(window).scrollTop() + screen.height > $('body').height()) {
        // if scroll has reached the bottom, execute this 
    }
};
like image 37
Srijan Gupta Avatar answered Oct 11 '22 17:10

Srijan Gupta