Terms And Conditions Scroll Box In JavaScript – scroll-to-accept.js

A tiny JavaScript library to create a scrollable box that forces your users to scroll down to read the Terms and Conditions.

The library creates a sticky Accept button at the bottom of the box that becomes available only when the user scrolls to the bottom.

How to use it:

1. Add the stylesheet scroll-to-accept.css and JavaScript scroll-to-accept.js to the webpage.

<link rel="stylesheet" href="./scroll-to-accept.css" />
<script src="./scroll-to-accept.js"></script>

2. Add your Terms and Conditions into a scroll box.

<div class="terms-and-conditions">
  <h1>Terms and Conditions</h1>
  ...
</div>

3. Create an Accept button and then insert it together with the scroll box into a container.

<div class="wrapper">
  <div class="terms-and-conditions">
    <h1>Terms and Conditions</h1>
    ...
  </div>
  <button class="accept" disabled onclick="dosomething();">Accept</button>
</div>