I tried to build a website similar to [this](http://msgs.jibjab.com). To do this I wrote the following code:

```
var $window = $(window);
var lastScrollTop = 0;
var shown_elements = 0;
var next_element = 0;
$window.on('scroll', scroll_to_next);
$window.trigger('scroll');

var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
var scroll = $(window).scrollTop();

function scroll_to_next() {

  shown_elements = Math.ceil($(window).scrollTop() / window_height);
  next_element = shown_elements * window_height;
  if (lastScrollTop < $(window).scrollTop() && lastScrollTop != 0) {
    //$window.scrollTop(next_element);
    $('html, body').animate({
      scrollTop: next_element
    }, 'slow');
    //alert(next_element);
  }
  lastScrollTop = $(window).scrollTop();
}

```

This is the HTML:

```
<div class="showroom1">
  <div class="showroom_left">
    <img class="fixed" src="mokups/frame.png">
    <img class="screen" src="mokups/screen2.png">
  </div>
  <div class="showroom_right">
    <h3>Hello</h3>
    <h4>description</h4>
  </div>
</div>

<div class="showroom2">
  <div class="showroom_left">
    <img class="screen" src="mokups/screen1.png">
  </div>
  <div class="showroom_right">
    <h3>Hello</h3>
    <h4>description</h4>
  </div>
</div>
<div class="showroom1">
  <div class="showroom_left">
    <img class="fixed" src="mokups/frame.png">
    <img class="screen" src="mokups/screen2.png">
  </div>
  <div class="showroom_right">
    <h3>Hello</h3>
    <h4>description</h4>
  </div>
</div>

```

This code runs the first time. And scroll automatically to the second "showroom". But when I try to scroll a second time the page will not scroll.

What is wrong with my code?