JQuery scrolls div up and down using two buttons

Question

I have a simple set of two buttons that, when hovering, should move the div up and down to mimic the scroll effect:

$("#down").hover(function () { $('.scroll').animate({ "marginTop": "-=50px" }, "fast"); }); $("#up").hover(function () { $('.scroll').animate({ "marginTop": "+=50px" }, "fast"); }); 

However, I have two problems:

1.) I need him to stop when he gets to the end, and then hide the button so that they know that they have reached the end.

2.) It should constantly scroll when the user hovers over the mouse, currently it only does it once on the mouse, and then starts it again when leaving the mouse.

3.) If the content does not exceed the height of the parent element, hide both buttons, since we do not need to scroll them.

Can anyone help?

I thought that maybe 1 could be solved by knowing the height of the scroll bar and judging by its offset to its parent element, which holds it, and creates a frame view?

thanks

Answer 1

This code still needs some debugging, but you can get the idea in it:

 $(document).ready(function() { if ($('.content').height() > $('.container').height()) { $("#down").hover(function () { animateContent("down"); }, function() { $('.content').stop(); }); $("#up").hover(function () { animateContent("up"); }, function() { $('.content').stop(); }); } }); function animateContent(direction) { var animationOffset = $('.container').height() - $('.content').height(); if (direction == 'up') { animationOffset = 0; } $('.content').animate({ "marginTop": animationOffset + "px" }, "fast"); } 

Code: http://jsfiddle.net/a89DF/6/

Answer 2

• You need to set the animation parameter to the actual height of the divs jQuery.height () method

• You must change the mouse event bindings to "mouseenter" and "mouseleave", and then using "mouseleave" you can stop jQuery using the jQuery.stop () method

• You can calculate this using the jQuery.height () method .

Answer 3

I think animate more useful for single effects of animation, and not for continuous and variable change. You can implement this yourself at intervals.

 var interval; $("#down").mouseenter(function () { interval = setInterval(ScrollDown, 100); }); $("#down").mouseleave(function () { clearInterval(interval); }); function ScrollDown() { $('.scroll').css("marginTop", "+=50px"); // check bounds here to solve problem #1 } /* do the same stuff for scrolling up */ 

Answer 4

I wrote a jQuery jquery.scrollbuttons plugin that should suit your needs. He has a page on github and a page of examples .

The only thing the plugin will not do is hide the button when scrolling is complete. If you still need this feature, I can easily add it.