реализовать анимированную

dabblet.css

/*
	реализовать анимированную 
	навигацию по div.a1
	без перезагрузки страницы
	с поддержкой истории послещений
	
	http://clck.ru/d/nEyP0z8x143w5
*/


    body {
      font: 14px/1.4 Verdana;
    }
    
    h1 {
      margin: 30px 0;
    }
    
    .container {
      width: 350px;
      height: 500px;
      padding: 10px;
      -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .7);
         -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .7);
              box-shadow: 0 0 4px rgba(0, 0, 0, .7);
    }
    
    .menu {
      display: inline-block;
      vertical-align: top;
      width: 40px;
      list-style: none;
      margin: 0 8px 0 0;
      padding: 0;
    }
    
    .menu a {
      display: inline-block;
      background: #cfcfcf;
      padding: 4px 10px;
      margin-bottom: 2px;
    }
    
    .body {
      display: inline-block;
      vertical-align: top;    
      width: 300px;
      height: 480px;
      overflow: hidden;
    }
    
    .a1,
    .a2,
    .a3 {
      background: #e4e4e4;
      overflow: auto;
      height: 460px;
      padding: 10px;
      -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .7);
         -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, .7);
              box-shadow: inset 0 0 4px rgba(0, 0, 0, .7);      
    }
    
    .a1 {
    -webkit-transition: all 0.2s ease;
       -moz-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
         -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
    }
    
    #a1:target ~ .a1 {
      margin-top: 0;
    }
    
    #a2:target ~ .a1 {
      margin-top: -480px;
    }
    
    #a3:target ~ .a1 {
      margin-top: -960px;
    }  

dabblet.html

<div class="container">	

	<ul class="menu">
		<li><a href="#a1">a1</a></li>
		<li><a href="#a2">a2</a></li>
		<li><a href="#a3">a3</a></li>
	</ul
	><div class="body">	
		<span id="a1"></span>
		<span id="a2"></span>
		<span id="a3"></span>	
		<div class="a1">
			<h1>a1</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
			<div class="a2">
			<h1>a2</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
			<div class="a3">
			<h1>a3</h1>
			<p>
				Дип-скай объект, как бы это ни казалось парадоксальным, существенно меняет Тукан, 
				Плутон не входит в эту классификацию. Аргумент перигелия, и это следует подчеркнуть, 
				последовательно оценивает непреложный афелий , данное соглашение было заключено на 2-й 
				международной конференции "Земля из космоса - наиболее эффективные решения". 
			</p>
			<p>	
				Очевидно, что астероид недоступно ищет космический реликтовый ледник, хотя галактику в созвездии 
				Дракона можно назвать карликовой. Космогоническая гипотеза Шмидта позволяет достаточно 
				просто объяснить эту нестыковку, однако полнолуние иллюстрирует астероидный ионный хвост, 
				Плутон не входит в эту классификацию. 
			</p>
			<p>		
				Лисичка оценивает экваториальный поперечник, хотя 
				это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. 
				Азимут, и это следует подчеркнуть, колеблет Южный Треугольник, при этом плотность Вселенной 
				в 3 * 10 в 18-й степени раз меньше, с учетом некоторой неизвестной добавки скрытой массы.
			</p>
			</div>
		
	</div>
</div>	

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}