Is there a way to force a user to scroll to the bottom of a div?

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开发者_Python百科 or jQuery?

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 income.

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