I don't need to auto-scroll to the bottom of a div, rather force the user to scroll there themselves. I've got a legal agreement that I'd actually like people to read. Possible using regular JS or jQuery?

I don't need to auto-scroll to the bottom of a div, rather force the user to scroll there themselves. I've got a legal agreement that I'd actually like people to read. Possible using regular JS or jQuery?

• javascript
• jquery

• 8 When you say you want them to read it do you really mean that you want them to read it or that you want them to scroll to the bottom and press a button? – Steve Weet Commented Apr 30, 2010 at 16:09
• Is this on a web page? Why do you need a scrolling div? Keep it simple and put in a regular div with the Accept button at the bottom of the web page. EULAs in scrolling text boxes were used in old installers whose windows didn't natively scroll, but no reason to copy that design for a web page (unless you're using jQuery in a thick client installer somehow, you don't specify). – Marc Stober Commented Apr 30, 2010 at 16:34
• The EULA is within a scrollable window in a larger reg page. Users can print to see it alone/in a new window but my design requires it be nested in the reg page in a smaller view. I have thought about just hiding the button at the end of the scrollable window but it's not the route I want to take: I'll end up with lots of support queries saying "I can't find the button" and even though the answer is easy ("scroll to the bottom") it's less costly to deflect these kinds of user problems by making the button plain as day and erroring out if they haven't yet scrolled to the bottom. – buley Commented Apr 30, 2010 at 16:39
• Sometimes the client wants something you may advise against, but in the end, they are the client, and they "know" what they want. sigh – Kumu Commented Apr 30, 2010 at 16:40
• If it's good enough for blizzard... – NibblyPig Commented Apr 30, 2010 at 16:54

6 Answers 6

I've had to do this before, this is what I did to make it work in several browsers:

function disclaimerFunction() {
            $(".AcknowledgeOuterDiv").scroll(function() {
                var outerDiv = $(this);
                var innerDiv = $(">.AcknowledgeInnerDiv", $(this));
                var ScrollMod = 1;
                if (outerDiv.offset().top < innerDiv.outerHeight()) {
                    ScrollMod = -1;
                }
                if (Math.round((ScrollMod * innerDiv.offset().top) + outerDiv.height() + outerDiv.offset().top) >= innerDiv.outerHeight() && Math.abs(innerDiv.offset().top) != 0) {
                    $(".AcknowledgeCheckBox input").attr("disabled", false);
                    $(this).unbind("scroll");
                } else {
                    $(".AcknowledgeCheckBox input").attr("disabled", true);
                }
            });
        }

CSS:

.AcknowledgeOuterDiv
{
    float: left;
    width: 100%;
    height: 300px;
    overflow: auto;
}
.AcknowledgeInnerDiv
{
    float: left;
}

HTML:

<div class="AcknowledgeOuterDiv">
      <div class="AcknowledgeInnerDiv">
           A lot of text
      </div>
</div>
<span class="AcknowledgeCheckBox">
    <input id="MainContent_AcknowledgeCheckBox" type="checkbox" disabled="disabled">
    <label for="MainContent_AcknowledgeCheckBox">*I have read and understand the above disclaimer.</label>
</span>

EDIT: Added the checkbox that gets enabled when scrolled to the bottom.

How about just have an "accept" button at the bottom, and a high visibility note at the top that they'll need to scroll through to the bottom to accept the agreement and continue onwards.

In a case like this, where you want to user to accept before continuing, I would not rely on javascript, I would create the functionality that you want without javascript and simply add javascript for progressive enhancement only (e.g. perhaps a "are you sure you want to leave this page" message when they go to close the page without having hit the accept button).

Other ways to approach the problem:

• Give a human, plain text summary of legalese.
• Design the EULA (I'm guessing) well and beautifully so that it is easy on the eyes to read and has the important information highlighted.
• Keep it short, so it is actually readable within a reasonable time-frame.
• Add js enhancements to make it -fun- to read through, e.g. clickable elements that change color.
• Respect your users enough to make them -want- to read your agreement instead of meaninglessly forcing them to do so.

jQuery has a number of plugins that trigger when an element is scrolled into view.

Place the element at the very bottom of your license agreement; have that element activate the "next" button once it has been scrolled into view.

• How can I get jQuery to call an event handler when an image actually appears on-screen?
• Load content as an element scrolls into view

I found this one that works better...for me anyways

$.fn.isNearTheEnd = function() {
    // remember inside of $.fn.whatever = function() {}
    //   this is the jQuery object the function is called on.
    //   this[0] is DOMElement
    return this[0].scrollTop + this.height() >= this[0].scrollHeight;
};

// an example.
$("#content").bind("scroll", function() {
    if ($(this).isNearTheEnd()) // load some content
});

Load content as an element scrolls into view

If you use JavaScript or something to detect when they've reached the bottom, you'll still have the people who just move the scrollbar to the bottom to skip the reading. It's a lost cause, don't worry about it. If they register, they still have to follow your agreement whether they read it or not.

By forcing users to read the agreement you're just going to make people lose interest and not register = fewer visitors and ultimately less ine.

Below is one way how to make more...sure that users have read the agreement, but i hope noone will ever use such methods :D for the sake of all of us.

body{
    width: 80;
    margin: 0 auto;
}
#header, #footer {
    height: 36px;
    background: green;
}
#container {
    background: #FAFAFF;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
#tos {
    background: #AAAAFF;
    width: 80%;
    height: 800px;
    margin: 0 auto;
}
.ui-selected {
    background: red;
}
option {
    background: red;
}
option:hover {
    background-color: red;
    border: 1px solid gold;
    border-radius: 10px;
    color:red;
}
#more {
    position: absolute;
    bottom: 80px;
    left: 220px;
}

<body>
    <div id="header">Header</div>
    <div id="container">
        <div id="tos">
            long and boring terms of service
            <br/>
            Click "more" to read further, u must read all of it
            You cant click until xx time has passed
            <br/><br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            long and boring terms of service
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            long and boring terms of service
            <br/><br/><br/><br/><br/>
            long and boring terms of service
            <br/>
            <br/><br/><br/><br/><br/>
            <input type="button" value="More" id="more" />
        </div>

    </div>
    <div id="footer">Footer</div>
    <input type="button" disabled="disabled" id="iveread" value="i have read the terms" />
</body>



var c = $("#container");
var m = $("#more");
c.data("scrollLv", 0);
m.click(function() {
    var s = c.data("scrollLv") + 120;
    c.data("scrollLv", s);
    c.scrollTop(s);
    m.prop("disabled", "disabled");
    setTimeout(function() {m.removeProp("disabled");}, 3000);
    if (s > 500) {
        m.remove();
        $("#iveread").removeProp("disabled");
    }
});

Js Fiddle sample