Recently a client wanted to have a user agreement added to an enrollment form. The catch was that I needed to confirm that the user had at least scrolled through the text before allowing them to continue on with the form submission. Once again, jQuery to the rescue!

HTML

<div class="agreement">
  <div class="agreement-inner">
    Content for agreement goes here...
  </div>
</div>
<div class="agreement-agree">
  This is the stuff I want activated when the agreement has been read.
</div>

jQuery JavaScript:

$(".agreement").scroll(function() {
  if ($(this).scrollTop() >= ($('.agreement-inner',this).height() - $(this).height())) {
    $('.agreement-agree').removeClass('disabled');
    $('.agreement').unbind('scroll');
    $('.agreement-agree').fadeTo(0,1);
  }
});

I’m currently working on deploying this to a generic jQuery plugin that will let you specify the content that needs to be scrolled through as well as the content should become enabled once that criteria is met.