javascript - Scrolling with click on button - Stack Overflow

admin管理员组

文章数量:1399491

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

Share Improve this question Follow asked Jan 10, 2017 at 19:09 public9nfpublic9nf 1,40933 gold badges2020 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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

本文标签： javascriptScrolling with click on buttonStack Overflow