Scroll on hover, click for speed

Question

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.

Answer 1

You're not that far off from the solution. You need to assign the interval or timeout to a variable and clear it when you hover off the element:

$(function () {
    var speed = 1,
        timer;
    $("#hoverscroll").hover(function () {
        var div = $('body');
        (function startscrolling(){
            timer = setTimeout(function () {
                var pos = div.scrollTop();
                div.scrollTop(pos + speed);
                startscrolling();
            }, 100);
        })();
    },

    function () {
        clearTimeout(timer);
        speed = 1;
    })
    .click(function(){
         if (speed < 6) speed++;
    });

});

http://jsfiddle.net/3yJVF/2/

Answer 2

I updated the code of the accepted question because it doesn't work anymore.

See:

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

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

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

http://jsfiddle.net/wzvowvzn

Answer 3

try following against your fiddle code:

$(document).ready(function() {
     $("#hoverscroll").mouseover(function() {
       var div = $('body');
      setInterval(function(){
       var pos = $("#hoverscroll").postion().top;       
         window.scrollTo(0, pos + 1)
     },500);

 });
});

see this fiddle: http://jsfiddle.net/3yJVF/5/

Answer 4

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?