Turn a function on or off after scrolling to bottom

I have a div with "Terms and Conditions". It is a vertically scrollable div. The idea is to scroll all the way down which will allow a user to then Submit (by hitting the submit button). But it is not really a button, but an anchor with a javascript function inside.

<a onclick="showDialog();"><img
   开发者_如何学运维 name="continue" value="Continue" alt="Continue"
    src="${resource(dir: 'images/buttons', file: 'submit.gif')}"
    border="0" /></a>

So what I need to do is when a user scrolls down, it will then turn on the javascript function but it will remain off if not.

Any advice?

---

The scrollTop of the div (#terms) is how far down inside the top of the viewable area is. The height of the div is how much the user sees. It thus follows that the scrollTop of the div plus the height of the div must be at least as much as the total height of the entire terms of service document inside (which we will call #termsInner).

Here's some example HTML code: (Note: You can try this out at http://jsfiddle.net/8U7GY/6/.)

<p id="instructions">Please read these terms and conditions  now.
<b>You must scroll to the bottom before  continuing.</b></p>

<div id="terms">
    <div id="termsInner">
        <p>Lorem ipsum...</p>
    </div>
</div>

<span><a id="submit">Register me!</a></span>

Some CSS code:

p {
    padding: 0.25em;
}

#terms {
    border: solid 1px;
    height: 24em;
    overflow: auto;
    margin-bottom: 1em;
}

#termsInner {
    padding: 0.5em 0;
}

.highlighted {
    background-color: #ff0;
}


#submit {
    color: blue;
    text-decoration: underline;
}

And some JavaScript code: (This must be in $(function() { ... }); so that it is executed only once the document is ready.)

// Select the elements of the HTML page.
var instructions = $('#instructions'),
    terms = $('#terms'),
    termsInner = $('#termsInner'),
    submit = $('#submit');

// Bind an event handler that will run when the user
// has not scrolled through the terms of service.
submit.bind('click', function() {
    // Highlight the instructions.
    instructions.addClass('highlighted');

    // Remove the highlighting after two seconds.
    setTimeout(function() {
        instructions.removeClass('highlighted');
    }, 2000);
});

// Once the user scrolls through, call showDialog instead
// when the user clicks.
terms.scroll(function() {
    if (terms.scrollTop() + terms.height() >= termsInner.height()) {
        submit.unbind('click').bind('click', showDialog);
    }
});

// This is where you would continue the user registration process.
function showDialog() {
    alert('whatever');
}

There are several important things to notice.

1. We do not use the onclick HTML attribute but rather bind event handlers programmatically using bind and unbind. This allows us to make a different thing happen depending on whether the user has scrolled down or not.
2. jQuery provides the scroll method to register a function to run whenever the user scrolls the div. We check the sum of scrollTop and height against the height of the content inside the div, and if that is OK, we unbind the original click handler and bind a new one.
3. We highlight the instructions (if the user has not yet scrolled down but clicks the anchor anyways) for usability. If the user clicks and finds that nothing happens, he would think that the registration form does not work, would leave your site, and be left with a bad experience.

Edit: Fixed it to work on Internet Explorer. Because of the way IE works, you cannot have padding set on the div #terms itself, so set any padding on #termsInner instead.

---

You need to check the if the <div>'s scrollTop+height is equal to the scrollHeight.

With jQuery:

$('a').click(function(){
    var myDiv = $('div')
    if (myDiv.scrollTop() + myDiv.height() == myDiv.get(0).scrollHeight)
    {
        showDialog();
    }
    else
    {
        return false;
    }
});

You can also check the <div>'s scrollTop+height on the scroll event, and then enable/disable the anchor depending on whether or not the scrollHeight has been reached.