I have a button (div-element) on my website which is in the bottom-right corner of the website. Now i want to add a jquery function that when the user clicks on the button and holds it the page is scrolling down pixel by pixel on my website (not jumping to some anchor div).

My button:

<div id="scroll-icon">
    <i class="fa fa-long-arrow-down" aria-hidden="true"></i>
</div>

The CSS:

#scroll-icon {
    color: $color-leuchterred;
    display: none;
    position: fixed; right: 3.5rem; bottom: 3rem; 
    font-size: 3rem;
}  

I have a button (div-element) on my website which is in the bottom-right corner of the website. Now i want to add a jquery function that when the user clicks on the button and holds it the page is scrolling down pixel by pixel on my website (not jumping to some anchor div).

My button:

<div id="scroll-icon">
    <i class="fa fa-long-arrow-down" aria-hidden="true"></i>
</div>

The CSS:

#scroll-icon {
    color: $color-leuchterred;
    display: none;
    position: fixed; right: 3.5rem; bottom: 3rem; 
    font-size: 3rem;
}  

• javascript
• jquery
• scroll

2 Answers 2

Take a look at this. It will run until you mouseup again on the window. Going down 1 pixel at a time. Play around with the numbers until it feels right.

JavaScript:

$('#scroll-icon').mousedown(function(){
    timeout = setInterval(function(){
        window.scrollBy(0,1); // May need to be -1 to go down
    }, 0); // Play around with this number. May go too fast

    return false;
});

$(document).mouseup(function(){
    clearInterval(timeout);
    return false;
});

CSS:

#scroll-icon {
    color: $color-leuchterred;
    display: none;
    position: fixed; right: 3.5rem; bottom: 3rem; 
    font-size: 3rem;
}

HTML:

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll-icon">
    <i class="fa fa-long-arrow-down" aria-hidden="true"></i>
</div>

Try this. Page will scroll down pixel by pixel until mouse button is held down.

HTML:

<div id="scroll-icon">
    <i class="fa fa-long-arrow-down" aria-hidden="true">V</i>
</div>

CSS:

#scroll-icon {
    color: red;
    position: fixed; right: 3.5rem; bottom: 3rem; 
    font-size: 3rem;
}  
#scroll-icon:hover{
  cursor:pointer;
}
body{
  height: 1000px;
}

JS:

$("#scroll-icon").on("mousedown", function(){
    timeout = setInterval(function(){
            var cs = $("body").scrollTop();
            $("body").scrollTop(cs+1)
    }, 10);  // <--- Change this value to speed up/slow down scrolling

    return false;
});
$("#scroll-icon").on("mouseup", function(){
    clearInterval(timeout);
    return false;
});

Check also my Fiddle: https://jsfiddle/5w4zybcr/1/
I'd like to point out that this question was very helpfull and wasn't so hard to find ;) Hope I could help