jQuery - Multiscroll.js

multiscroll.js is a jQuery plugin for creating split pages with two vertical scrolling panels.

A Simple of multiscroll example as shown below

<!DOCTYPE html>

<html xmlns = "http://www.w3.org/1999/xhtml">

 

   <head>

      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />         

      <title>multiscroll.js - split multi-scrolling pages plugin</title>

                       

      <link rel = "stylesheet" type = "text/css"

         href = "/jquery/src/multiscroller/jquery.multiscroll.css" />                   

      <link rel = "stylesheet" type = "text/css"

         href = "/jquery/src/multiscroller/examples.css" />        

                                    

      <script

         src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

      <script type = "text/javascript"

         src = "/jquery/src/multiscroller/jquery.easings.min.js"></script>

      <script type = "text/javascript"

         src = "/jquery/src/multiscroller/jquery.multiscroll.js"></script>

 

      <script type = "text/javascript">

         $(document).ready(function() {

            $('#myContainer').multiscroll({

            sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],

            anchors: ['first', 'second', 'third'],

            menu: '#menu',

            navigation: true,

            navigationTooltips: ['One', 'Two', 'Three'],

            loopBottom: true,

            loopTop: true

            });

         });

      </script>

   </head>

           

   <body>

 

      <ul id = "menu">

         <li data-menuanchor = "first"><a href = "#first">First slide</a></li>

         <li data-menuanchor = "second"><a href = "#second">Second slide</a></li>

         <li data-menuanchor = "third"><a href = "#third">Third slide</a></li>

      </ul>

 

      <div id = "myContainer">

 

         <div class = "ms-left">

                                    

            <div class = "ms-section" id = "left1">

              <h1>Left 1</h1>

            </div>

 

            <div class = "ms-section" id = "left2">

               <h1>Left 2 </h1>

            </div>

 

            <div class = "ms-section" id = "left3">

               <h1>Left 3</h1>

            </div>

                                                

         </div>

           

         <div class = "ms-right">

                                    

            <div class = "ms-section" id = "right1">

               <h1>Right 1</h1>

            </div>

 

            <div class = "ms-section" id = "right2">

               <h1>Right 2</h1>

            </div>

 

            <div class = "ms-section" id = "right3">

               <h1>Right 3</h1>

            </div>

                                                

         </div>

                                    

      </div>

 

   </body>

           

</html>