Javascript 将鼠标悬停在图像上滚动div的内容

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

在下面的代码中，当我将鼠标悬停在“hover ME”div上时，它会跳到div的末尾。因此，我想要一个具有滚动效果且旁边没有滚动条的类似功能。。可能吗？这是

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>​

​

JAVASCRIPT:

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

为什么要重新发明轮子

---

您可以使用jquery插件

唯一的变化是：

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

---

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

hidden

尝试设置间隔，然后设置元素的

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

---

您可以修改每次滚动的间隔或数量，以达到所需的速度。请查看此处的工作演示>

，这样您可以进入

#容器中的
最后一个div
，找到该div的
偏移量（）
顶部
，然后应用滚动条

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

为什么要添加一个插件，当你可以做一行改变。。。更少的插件意味着更快的页面加载速度等，这有助于用户体验和SEO。@Moes：谢谢你，但webnoob是对的。我认为选择的答案更好。但是谢谢你的帮助。。向上投票。谢谢。这太好了。我是jquery的新手。因此，如果我必须滚动“向上”，我如何修改小提琴。。提前感谢..
$（“#容器”）.animate（{scrollTop:0}，1000）@Minko Gechev谢谢兄弟。。我很感激。我很高兴这有帮助！：-）最好的评价是小提琴链接已断开。谢谢，但一旦滚动完成，你的小提琴将停止工作。不过还是谢谢你。向上投票。
$('#hover').hover(function(){
    $('#container').animate({ scrollTop: $('#container div:last').offset().top }, 1000);
});