Scroll on hover, click for speed

click, events, hover, jquery, scroll

Solution

You were pretty close - here's my version (http://jsfiddle.net/Lcsb6/)

$(document).ready(function() {
    var count;
    var interval;

    $("#hoverscroll").on('mouseover', function() {
        var div = $('body');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 100);
    }).click(function() {
        count < 6 && count++;
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        // count = 0;
        clearInterval(interval);
    });
});

Changes to note:

- `count` is defined above the interval/bindings. It's not quite "global" in the sense that you can get to it in the window, but it is relegated to living inside the onReady closure.

- `interval` is the assigned value of `setInterval` - this way we can stop it from doing anything later with `clearInterval`

- I haven't seen `mouseleave` before, but `mouseout` should do it.

- In jQuery, you can chain things together - so `$('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...)` will save you the time of typing out the selector each time. Also, have a look at jQuery's `end()` method if you plan on using chaining.

- I prefer to use `$.fn.on` instead of the shorthands like `.click()` - it clearly denotes that you are using an event handler, consider throwing in the extra few characters for `on` and dropping the excess characters in your `$()` selections?

Problem

I am trying to make my page scroll when you hover on a div. This is what I got so far ``` $(document).ready(function() { $("#hoverscroll").mouseover(function() { var div = $('body'); setInterval(function(){ var pos = div.scrollTop(); div.scrollTop(pos + 1); }, 100) }); }); ``` http://jsfiddle.net/3yJVF/ However, there are two things left to do. I need it to increase speed each time you click, stop when you're no longer hovering and reset the speed back to default. I'm trying to achieve something like this: ``` $(document).ready(function() { $("#hoverscroll").mouseover(function() { var div = $('body'); setInterval(function(){ var count = 1; var pos = div.scrollTop(); div.scrollTop(pos + count); }, 100) }); $("#hoverscroll").click(function() { if (count < 6) { count = count+1; } }); $("#hoverscroll").mouseleave(function() { count = 0; }); }); ``` I searched and found some people talking about binding event and setting a global variable to check if it's scrolling. But will the above function work? I am still learning. I might be completely wrong.

Original source