API tools faq
paste
Advertisement
Guest User

jQuery scroll navigation

a guest
Feb 22nd, 2012
275
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5.  
  6.     <title>Daniel Wand - Föreläsare & Konsult</title>
  7.     <link rel="stylesheet" href="style.css" type="text/css" />
  8.    
  9.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10.     <meta name="keywords" content="Daniel Wand, idéhanteringssystem, open, öppen, innovation, affärsutvecklingskonsult, affärsutvecklare, föreläsning, föreläsare, idéhanteringssystem, ted, tedx, crowd, sourcing" />
  11.     <meta name="description" content="Daniel Wand - Konsult och föreläsare inom affärsutveckling med specialisering inom idéhantering och open innovation." />
  12.     <meta name="author" content="Daniel Wand" />
  13.     <meta name="copyright" content="Copyright 2012" />
  14.    
  15.     <script type="text/javascript" src="jquery.localscroll-1.2.7-min.js"></script>
  16.    
  17.     <script type="text/javascript">$('#nav').localScroll(); </script>
  18.    
  19.  
  20. </head>
  21.  
  22. <body>
  23.  
  24.  
  25. <div id="wrapper">
  26.  
  27. <!-- //////////////// Start Header and Navigation /////////////// -->
  28.        
  29.     <div id="header">
  30.    
  31.     <p class="logo"><a href="index.php"><img src="img/logo.png" alt="Daniel Wand" width="305" height="53" /></a><p>
  32.  
  33.     <div id="nav">
  34.    
  35.         <ul>
  36.             <li><a href="index.php" id="current">START</a></li>
  37.             <li><a href="#1">KONCEPT</a></li>
  38.             <li><a href="#2">OM MIG</a></li>
  39.             <li><a href="#3">TJÄNSTER</a></li>
  40.             <li><a href="#4">REFERENSER</a></li>
  41.             <li><a href="#5">KONTAKT</a></li>
  42.         </ul>
  43.    
  44. </div>
  45.  
  46. </div>
  47.    
  48.  <!-- //////////////// Content 0 - Start /////////////// -->
  49.  
  50.     <div id="content0">
  51.     <h1>Start</h1>
  52.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  53.      
  54.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  55.     </div>
  56.    
  57.  <!-- //////////////// Content 1 - Koncept /////////////// -->
  58.    
  59.     <div id="content1">
  60.     <a id="1"></a>
  61.     <h1>Koncept</h1>
  62.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  63.      
  64.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  65.     </div>
  66.  
  67.    
  68.  <!-- //////////////// Content 2 - Om mig /////////////// -->
  69.  
  70.     <div id="content2">
  71.     <a id="2"></a>
  72.     <h1>Om mig</h1>
  73.      
  74.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  75.      
  76.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  77.     </div>
  78.    
  79.      <!-- //////////////// Content 3 - Tjänster /////////////// -->
  80.  
  81.     <div id="content3">
  82.     <a id="3"></a>
  83.     <h1>Tjänster</h1>
  84.      
  85.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  86.      
  87.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  88.     </div>
  89.    
  90.          <!-- //////////////// Content 4 - Referenser /////////////// -->
  91.  
  92.     <div id="content4">
  93.     <a id="4"></a>
  94.     <h1>Referenser</h1>
  95.      
  96.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  97.      
  98.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  99.     </div>
  100.    
  101.          <!-- //////////////// Content 5 - Kontakt       /////////////// -->
  102.  
  103.     <div id="content5">
  104.     <a id="5"></a>
  105.     <h1>Kontakt</h1>
  106.      
  107.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  108.      
  109.           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac nulla ipsum. Morbi mollis ornare sapien, sed scelerisque turpis vulputate id. Vivamus rutrum purus non odio fringilla dictum. Proin sapien eros, porta quis dignissim vel, dignissim sit amet erat. Fusce fringilla dapibus ante, molestie varius mi sollicitudin ac. Cras lobortis orci vel tellus rutrum vestibulum. Duis consectetur tincidunt ante, ut faucibus nunc suscipit a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  110.     </div>
  111.  
  112. </div>
  113.  
  114. </body>
  115. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!