breaking into the unknown…

forcing scroll down to read terms and conditions

1 Comment

We often come across sites, asking user to read terms and conditions before they create there account or say order a item online. Most of the time user check the accept term and condition checkbox without reading the terms and conditions (generally it is big one and no one bother to read it ). Though, there is no way, we can ensure that user has really read the terms and conditions before giving his consent, we can do ensure that user has scroll down to the end of content. One of my client from banking sector has this requirement. His logic is that he do not want to get into any legal hustle if user claims that he do not know that there is more of content of terms conditions and he forget to scroll down.

This call for validation of scroll. The client specification is as below.

=> When applicant click  ” I accept ” button without scrolling down to bottom of terms and condition , he should be given alert message “Scroll down to read complete terms and conditions before accepting it”

=>Scroll down should be validated only once i,e if user scroll to the bottom and again move the scroll to top, it should be treated as that he has read it and allowed to submit form on clicking I accept.

The logic to implement it is as below :

=> Keep a hidden filed with its value set to false by default

<input type=”hidden” value=”false” name=”applicant_read_the_content” id=”applicant_read_the_content”>

=> Implement jQuery logic to check that scroll is at bottom and set the above value to true

basically if Scroll is at bottom, below condition should be true

total height of scroll = height of scrollbar + top position of scroll bar

=> when user click “I accept” check the value of the hidden field, it it is still false give the alert message otherwise let the form to get submit.

My HTML markup for the terms and condition acceptance page is as below :

  <form method="post" id="esign_acceptance_form" action="/application">
      <div>ESIGN Disclosure Statement and Consent</div>
      <div id="applicant_esign_content" style="height: 310px">
        your lenghty terms and condition will come here, which will result in scroll bar
    <div style="text-align: right;">
        <input type="hidden" value="false" name="applicant_read_the_content" id="applicant_read_the_content" />
        <a href="javascript:void(0)" id="accept_esign_disclosure_applicant">I Accept</a>
        <a href="javascript:void(0)" id="decline_esign_disclosure_applicant">Cancel</a>

The javascript code to validate the scroll is as below.

            var totalScrollHeight = $("#applicant_esign_content")[0].scrollHeight
            var scrollBarHeight = $("#applicant_esign_content")[0].clientHeight
            var scrollBarTopPosition = $("#applicant_esign_content")[0].scrollTop
            if (totalScrollHeight== scrollBarHeight + scrollBarTopPosition){

            if ($("#applicant_read_the_content").val() != "true"){
                alert("Please scroll through the disclosure text before clicking I Accept.")
                return false

The Important point to note in the above code is scrollHeight , clientHeight and scrollTop . To read them in detail read the reference below

Reference :

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

One thought on “forcing scroll down to read terms and conditions

  1. When operating function without the zoom is less than 100 %

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s