Прокрутка с нажатием кнопки

Question

У меня есть кнопка (div-element) на моем веб-сайте, которая находится в нижнем правом углу веб-сайта. Теперь я хочу добавить функцию jquery, которая, когда пользователь нажимает на кнопку и удерживает ее, прокручивает пиксель по пикселям на моем сайте (не перескакивая на какой-то анкерный div).

Моя кнопка:

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

CSS-:

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

Answer 1

Посмотрите на это. Он будет работать до тех пор, пока вы не нажмете кнопку мыши в окне. Переход вниз по 1 пикселу за раз. Играйте с цифрами, пока они не почувствуют себя правильно.

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.com/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> 

Answer 2

Попробуйте это. Страница будет прокручивать пиксель за пикселем до тех пор, пока не будет нажата кнопка мыши.

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; 
}); 

Проверьте также мой Fiddle: https://jsfiddle.net/5w4zybcr/1/
Я хотел бы отметить, что this question очень полезно и не так сложно найти;) Надеюсь, я может помочь