通过将鼠标悬停在图像上来滚动div的内容

Question

我有一个包含很多内容的div，它跨越了页面大小。 所以我想知道是否可以分别在div的上方和下方添加“向上箭头图像”和“向下箭头图像”。 当我将鼠标悬停在图像上时，div上的内容将开始滚动，就像它在页面上滚动一样。 但我不希望滚动条出现在我的div旁边..我希望只有当我将鼠标悬停在图像上时才能滚动内容。

在下面的代码中，当我将鼠标悬停在“HOVER ME”div上时，它会跳转到div的末尾。 所以我想要一个类似的功能与滚动效果，旁边没有滚动条..有可能吗？ 这是jsfiddle链接

HTML代码：

<a href="#last">Last</a>
<div id="hover"> HOVER ME </div>
<div id="container">
    <div><a name=""></a> One </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name="last"></a> Last </div>
<br class="clear">
</div>​

CSS代码：

#hover{
   width:200px;
   height:20px;
 border:1px solid #cc0000;   
}
#container{
  width:500px;
  height:300px;
 overflow-y:auto;   
    border:1px solid #000;
}
#container div{
  width:100px;
height:100px;    
    float:left;
}
.clear{
 clear:both;   
}

JAVASCRIPT：

$('#hover').hover(function(){
    window.location = '#last';
});​

Answer 1

唯一的变化是：

$('#hover').hover(function(){
    $('#container').animate({ scrollTop: $('#container')[0].scrollHeight }, 1000);
});​

在容器的CSS样式中，我将overflow属性更改为hidden 。

Answer 2

为什么重新发明轮子

你可以使用jquery插件http://logicbox.net/jquery/simplyscroll/vertical.html

Answer 3

尝试设置间隔，然后设置元素的scrollTop属性的动画：

$(function() {
    var current_scroll = 0,
        container = $('#container'),
        timer

    $('#hover').hover(function() {  
        timer = window.setInterval(scrollDiv, 30);
    }, function() {  
        window.clearInterval(timer);
    });​​​​​

    function scrollDiv()
    {
        var new_scroll = current_scroll += 10;
        container.scrollTop(new_scroll);
        current_scroll = new_scroll;
    }
});

您可以每次修改间隔或数量滚动以达到所需的速度。 请在这里查看工作演示> http://jsfiddle.net/tUYKS/

Answer 4

这样你就可以到#container的last div ，找到last div的offset() top ，然后只应用scroll。

$('#hover').hover(function(){
    $('#container').animate({ scrollTop: $('#container div:last').offset().top }, 1000);
});