7

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.

Improve this question

4 Answers 4

Reset to default
9

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?
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Both solution worked. Since I'm new to this I can't say which one is more efficient. But thanks for taking your time to explain the code!
Efficiency in this case is negligible - having said that, you should work through all of the working solutions and understand how they work and apply the techniques shown appropriately when you need them.
2

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/

Improve this answer

Comments

0

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/

Improve this answer

Comments

0

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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.