I have a div with a lot of content in it which crosses the page size. so i was wondering whether it is possible to add an "up arrow image" and "down arrow image" above and below the div respectively. When I would hover over the images the content on the div will start scrolling like the way it scrolls on a page. but I dont want a scroll bar to appear next to my div.. I jus want the content to scroll only when i hover over the images..

In the code below when i hover over the "HOVER ME" div it jumps to the end of the div. So i want a similar functionality with scrolling effect and without the scrolling bar next to it.. Is it possible? This is the jsfiddle link

HTML CODE:

<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 CODE:

#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';
});​

I have a div with a lot of content in it which crosses the page size. so i was wondering whether it is possible to add an "up arrow image" and "down arrow image" above and below the div respectively. When I would hover over the images the content on the div will start scrolling like the way it scrolls on a page. but I dont want a scroll bar to appear next to my div.. I jus want the content to scroll only when i hover over the images..

In the code below when i hover over the "HOVER ME" div it jumps to the end of the div. So i want a similar functionality with scrolling effect and without the scrolling bar next to it.. Is it possible? This is the jsfiddle link

HTML CODE:

<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 CODE:

#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';
});​

• javascript
• jquery
• html
• css

4 Answers 4

The only change is here:

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

In the CSS style of the container I've changed the overflow property to hidden.

why reinvent the wheel

you can use a jquery plugin http://logicbox/jquery/simplyscroll/vertical.html

Try setting an interval and then animating the element's scrollTop property:

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

You can modify the interval or the amount scroll each time to achieve the speed that you want. Please see a working demo here > http://jsfiddle/tUYKS/

This way you can get to the last div in the #container, find the offset() top of that div and just apply scroll.

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