How to start a jQuery event when the user scrolls to the bottom of the page?

Question

I am trying to get an alert to show if a user scrolls within 100 pixels of the bottom of the page. I'm getting /friends to load into div class = social, but I am having trouble with the scroll part. Any advice on what I can fix?

<!--Load friends module -->
<script>
  $(document).ready(function (){
    $('.social').load("/friends");
  });
</script>
<!--Load more videos if scroll within 100 pixels of bottom -->
<script type="text/javascript">
  counter = 2;
  $(document).ready(function (){
    function loadMore() {
      console.log("More loaded");
      alert("test");
      $('.more_videos').load("/more_videos/"+counter);
      $(window).bind('scroll', bindScroll);
    }
    function bindScroll(){
      if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        $(window).unbind('scroll');
        loadMore();
      }
    }
    $(window).scroll(bindScroll);​
  });
  counter = counter+1;
</script>

Answer 1

There is an invisible character after this line

$(window).scroll(bindScroll); 

You can see it here . It is the little red dot at the end of line 20