Не скролится по ссылке в лендинге

$('ul li').on('click',function(){ 
  var liClass = $(this).attr('class'); 
  var slidePos = $('.slide.s'+liClass).offset().top; 
  $(window).scrollTop(slidePos); 
});

body {margin: 0;} 
ul {width: 50px; padding: 5px 0; background: #fff; position: fixed; right: 5px; top: 5px; margin: 0;} 
li {display: block; width: 100%; background: #ccc; margin-bottom: 5px; text-align: center; cursor: pointer;} 
.slide {width: 100%; height: 200px;} 
.slide.s1 {background: red;} 
.slide.s2 {background: blue;} 
.slide.s3 {background: yellow;} 
.slide.s4 {background: green;} 
.slide.s5 {background: gray;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<ul> 
  <li class="1">1</li> 
  <li class="2">2</li> 
  <li class="3">3</li> 
  <li class="4">4</li> 
  <li class="5">5</li> 
</ul> 
 
<div class="slide s1">1</div> 
<div class="slide s2">2</div> 
<div class="slide s3">3</div> 
<div class="slide s4">4</div> 
<div class="slide s5">5</div>