Cacher is the code snippet organizer for pro developers

/* Scrollbar Webkit */
::-webkit-scrollbar{
  width:0.5em;
  background:#7EC6FF;
}
::-webkit-scrollbar-thumb{
  background:#289ADA;
}
::selection{
  background:#289ADA;
  color:#ffffff;
}
html,body{
  margin:0;
  padding:0;
  position:relative;
  background:#6AAEEC;
  font-family:'Lato', sans-serif;
}
h1{
  font-family:'Emblema One', cursive;
}
.boxed{
  width:80%;
  margin:0 auto;
  display:block;
  background:#7EC6FF;
}
@media only screen and (max-width: 800px){
  .boxed{
    width:98%;
  }
}
.menu{
  background:#289ADA;
  border-bottom:0.2em solid #ffffff;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
.menu li{
  display:inline-block;
}
.menu li a{
  text-decoration:none;
  padding:10px;
  display:block;
  color:white;
  font-family:'Emblema One', cursive;
}
.main{
  padding:0.5em;
}
.box{
  background:#ffffff;
  color:#9B9B9B;
  position:relative;
  padding:1em;
  display:block;
  margin:0.5em auto;
  /*transition*/
  -webkit-transition:background 1s ease,color 1.2s ease;
  -moz-transition:background 1s ease,color 1.2s ease;
  -o-transition:background 1s ease,color 1.2s ease;
  transition:background 1s ease,color 1.2s ease;
}
.top{
  position:absolute;
  right:0;
  top:0;
  text-decoration:none;
  background:#289ADA;
  color:white;
  padding:0.5em;
  font-family:'Emblema One', cursive;
  font-size:0.8em;
}

;(function(){
  
  'use-strict';
  
  // for all data-fn
  $.dt = function(elem){
    return $('[data-fn="'+elem+'"]');
  };
  
  // scroll function
  function scroll(el){
    $.dt(el).on('click',function(){
      
      var link = $(this).attr('href'),
          dest = $('[data-obj="'+link+'"]');
      
      dest.siblings().css({
        background:'#fff',
        color:'#9B9B9B',
        boxShadow:'none'
      });
      
      dest.css({
        background:'#96D5FF',
        color:'#3788D3',
        boxShadow:'#555 0px 6px 6px -6px'
      });
      
      
      $('html, body').animate({
        scrollTop:dest.position().top
      }, 'slow');
      
    });
  }
  
  
  
  // To top
  $.dt('top').on('click',function(){
    $('html, body').animate({
      scrollTop:0
    }, 'slow');
    return false;
  });
  
  
  function init_script_now(){
    var sl = $('[data-fn]').toArray();
    for (var i = 1; i< sl.length; i++){
      scroll(i);
    }
  }
  
  init_script_now();
  
})(jQuery);

<!-- google fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato|Emblema+One' rel='stylesheet' type='text/css'>


<div class="boxed">
  <!-- MENU -->
  <ul class="menu">
    <li><a href="#one"   data-fn="1">One</a></li>
    <li><a href="#two"   data-fn="2">Two</a></li>
    <li><a href="#three" data-fn="3">Three</a></li>
    <li><a href="#four"  data-fn="4">Four</a></li>
    <li><a href="#five"  data-fn="5">Five</a></li>
    <li><a href="#six"   data-fn="6">Six</a></li>
    <li><a href="#seven" data-fn="7">Seven</a></li>
    <li><a href="#eight" data-fn="8">Eight</a></li>
    <li><a href="#nine"  data-fn="9">Nine</a></li>
    <li><a href="#ten"   data-fn="10">Ten</a></li>
  </ul>
  
  <!-- MAIN CONTENT -->
  <div class="main">
    <div class="box" data-obj="#one">
      <h1>level one</h1>
      <a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    <div class="box"  data-obj="#two">
      <h1>level two</h1><a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    <div class="box"  data-obj="#three">
      <h1>level three</h1><a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    <div class="box"  data-obj="#four">
      <h1>level four</h1>
      <a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    <div class="box"  data-obj="#five">
      <h1>level five</h1>
      <a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    
    <div class="box"  data-obj="#six">
      <h1>level six</h1>
      <a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    <div class="box"  data-obj="#seven">
      <h1>level seven</h1>
      <a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    <div class="box"  data-obj="#eight">
      <h1>level nine</h1>
      <a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    <div class="box"  data-obj="#nine">
      <h1>level nine</h1>
      <a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
    <div class="box"  data-obj="#ten">
      <h1>level Ten</h1>
      <a class="top" href="#" data-fn="top">Top</a>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum animi error illo omnis labore asperiores qui praesentium odit nisi tenetur eveniet velit voluptas architecto et cum neque. Praesentium cupiditate?
    </div>
  </div><!-- / MAIN CONTENT -->
</div><!-- /BOXED -->