Jquery scroll some text inside a div with overflow

Hello to every one.

This supposed to be simple, but I don’t really know jQuery in order to implement this the proper way.

All I want is to create a div with some text inside. The div will be overflowed some text will be visible.

So all I want to do is to create to small links “up” and “down” so when the visitor clicks on then the text scrolls up or down. like this effect here

http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

I tried to do some search … but all I find are plugins and scrollers to create carousels or so…

This supposed to be easy, but I am missing something…

Thanks in advance

jQuery has a built in method called .scrollTop() which uses a numeric value to scroll an element to a specific point. Eg here is something i wrote quickly

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
    var ele   = $('#scroll');
    var speed = 25, scroll = 5, scrolling;
    
    $('#scroll-up').mouseenter(function() {
        // Scroll the element up
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() - scroll );
        }, speed);
    });
    
    $('#scroll-down').mouseenter(function() {
        // Scroll the element down
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() + scroll );
        }, speed);
    });
    
    $('#scroll-up, #scroll-down').bind({
        click: function(e) {
            // Prevent the default click action
            e.preventDefault();
        },
        mouseleave: function() {
            if (scrolling) {
                window.clearInterval(scrolling);
                scrolling = false;
            }
        }
    });
});
</script>
<style type="text/css">
<!--
div#scroll {
    width: 200px;
    height: 200px;
    overflow: hidden;
    padding: 4px;
    margin-bottom: 20px;
}
-->
</style>
</head>
<body>

<div id="scroll">
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here
</div>

<a href="#" id="scroll-down">Down</a> - <a href="#" id="scroll-up">Up</a>

</body>
</html>
1 Like

It works fine… Thank you very much for your help. Hope some other people find this one usefull

No problem, was a fun little snippet to write :stuck_out_tongue: