Question

我的网站上有一个按钮（div-element），位于网站的右下角。现在我想添加一个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;
});

还检查我的小提琴：https://jsfiddle.net/5w4zybcr/1/
我想指出this question非常有帮助而且不是很难找到;）希望我能提供帮助

单击按钮滚动

2 个答案: