如何使用jQuery在click和mouseover上创建可滚动的div滚动

时间:2010-12-31 19:08:29

标签: javascript jquery scroll

使用下面的标记,当我单击或将鼠标悬停在“#scrollUp”或“#scrollDown”锚标记上时,如何向上或向下滚动“#content”div。滚动应该是平滑的。如果点击它应滚动特定数量(对于触摸设备)如果鼠标悬停它可以滚动直到mouseout。

 <style>  
         #content {
         overflow:auto;
         height: 50px; /*could be whatever*/
                 }
  </style>

<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>

<div id="wrapper">
 <div id="content">

  <ul>
    <li>some content here</li>
    <li>some content here</li>
    <li>some content here</li>
    <li>some content here</li>
    <li>some content here</li>
    <li>some content here</li>
  </ul>

 </div>
</div>

2 个答案:

答案 0 :(得分:34)

您可以使用jQuery的animate功能在clickmouseover上实现平滑滚动效果:

var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    // Cancel scrolling continuously:
    scrolling = false;
});


$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            // If we want to keep scrolling, call the scrollContent function again:
            scrollContent(direction);
        }
    });
}

工作示例:http://jsfiddle.net/andrewwhitaker/s5mgX/

(您必须停用mouseovermouseout事件才能正确查看click事件处理程序的效果

工作原理:

  • 使用上面提到的animate功能在点击时按指定数量平滑滚动。
  • 使用标志在链接的mouseover事件处理程序被调用时启用连续滚动,并在链接的mouseout事件处理程序时禁用滚动。
  • 调用scrollContent时,如果动画完成后scrolling标记仍为true,则会再次以相同方向设置动画。 animate的回调函数参数允许我们在动画完成后执行操作。

答案 1 :(得分:0)

尝试使用JavaScript而不是jQuery来完成此任务。 Google功能scrollBy()window.scrollBy()

一样