Question

Shor question – page opened on pc with not-so-good touch-screen display. I created 2 big arrows and dont know how to program it using JS/jQuery.

First try: onClick->scroll – it works but user must tap many times to scroll article.
Second:

     var scrolling = false;
 $("#scUp").mouseup(function(){
  $(this).css("opacity", 0.3);  
  scrolling = false;


 }).mousedown(function(){
  $(this).css("opacity", 1);

  scrolling = true;
  while(scrolling) {   
   $('html, body').stop().animate({ scrollTop: 50 }, 500);
  }
  event.preventDefault();

 });

Doesnt work 😉
I`m trying to simulate real browser scroll arrows – until you keep preesed mouse button page scrolls down (or up).

Answer 1

I answered this question some time back… basically it sets a flag when the mouse is down and clears when the mouse is up. Then a setTimeout loops until the flag clears. Also, it has mousewheel and drag-and-drop functionality.

Check out the demo