ボタンをクリックしてスクロールする

Question

ウェブサイトの右下にある私のウェブサイトにボタン（div要素）があります。今私は、ユーザーがボタンをクリックし、ページが私のウェブサイト上のピクセル単位でスクロールしているときに（いくつかのアンカーdivにジャンプしない）jquery関数を追加したいと思います。

マイボタン：

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

チェックも私のフィドル：私はthis questionは非常にあったことを指摘したいと思いますhttps://jsfiddle.net/5w4zybcr/1/
役に立った、見つけにくかった;）希望私助けることができる