Scroll a Div using jQuery

Here I show how to scroll a content of a div element using Jquery.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Scroll a Div - codesstore.blogspot.com</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
        <style type="text/css">

            #buttons{
                width:500px;
            }

            #right{
                float:right;
            }

            #scrollable{
                width:500px;
                overflow:hidden;
                border :1px solid #ccc;
            }

            #content{
                width:1500px;
                text-align:justify;
                padding:10px;
            }

        </style>

        <script type="text/javascript">
            $(document).ready(function(){  
              
                $('#left').click(function(){
                    $('#scrollable').animate({scrollLeft : '-=100'});        
                });

                $('#right').click(function(){

                    $('#scrollable').animate({scrollLeft : '+=100'});
                });

            });

        </script>

    </head>
    <body>

        <div id="buttons">
            <input type="button" id="left" value="<" />
            <input type="button" id="right" value=">" />
        </div>

        <div id="scrollable">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec neque vitae nibh volutpat ultricies vel ut dolor. Proin tempus ornare ipsum; in consequat sem rhoncus ac. Duis erat purus, porta nec arcu id, dapibus molestie magna. Cras sed velit vitae arcu sagittis iaculis. Morbi nibh ligula, vestibulum in cursus nec; vestibulum vel lacus. Morbi eu neque eget libero bibendum malesuada. Sed iaculis facilisis nisi vel euismod. Maecenas semper adipiscing sagittis? Integer scelerisque felis ullamcorper, viverra quam nec, euismod leo.
                    Vivamus condimentum egestas risus; quis commodo lacus dictum nec. . Sed varius accumsan nulla, nec varius enim aliquam id. Aenean nunc massa, elementum in congue ut, rhoncus eu leo. Aenean convallis at metus a euismod. Nulla nunc magna, ultrices sed hendrerit eu, ullamcorper sit amet tortor.
                </p>
            </div>
        </div>

    </body>
</html>
Demo
Click arrow buttons to scroll .


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec neque vitae nibh volutpat ultricies vel ut dolor. Proin tempus ornare ipsum; in consequat sem rhoncus ac. Duis erat purus, porta nec arcu id, dapibus molestie magna. Cras sed velit vitae arcu sagittis iaculis. Morbi nibh ligula, vestibulum in cursus nec; vestibulum vel lacus. Morbi eu neque eget libero bibendum malesuada. Sed iaculis facilisis nisi vel euismod. Maecenas semper adipiscing sagittis? Integer scelerisque felis ullamcorper, viverra quam nec, euismod leo. Vivamus condimentum egestas risus; quis commodo lacus dictum nec. . Sed varius accumsan nulla, nec varius enim aliquam id. Aenean nunc massa, elementum in congue ut, rhoncus eu leo. Aenean convallis at metus a euismod. Nulla nunc magna, ultrices sed hendrerit eu, ullamcorper sit amet tortor.

No comments:

Post a Comment