jQuery ('html.body'), ожидание не работает

Question

У меня есть страница с тремя div. Id нравится приносить каждый div в поле зрения, используя анимацию и позиции смещения каждого div. Я могу сказать, что атрибут link передается, и я получаю номера смещения. (проверено с помощью window.alerts) Проблема заключается в том, что контейнеры div не перемещаются в поле зрения.

Вот ссылки

<div id="minibar" class="minibar"> 
<a href="#main" class="rarrow">Main</a> 
<a href="#slide1" class="rarrow">Creative Showcase</a> 
<a href="#slide2" class="rarrow">News</a> 
</div> 

Содержание дивы

<div id="main" class="main" ><content></div> 
<div id="slide1" class="main"><content></div> 
<div id="slide2" class="main"><content></div> 

CSS для содержания

.main{ 
     width:800px; 
     padding:10px; 
     color:#000; 
     background:rgba(255,255,255,.85); 
     height:405px; 
     overflow:auto; 
     position: relative; 
     -webkit-border-radius: 20px; 
    border-radius: 20px; 
     -moz-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35); 
     -webkit-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35); 
     box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35); 
     text-shadow:none; 
     margin-top:175px; 
     font-weight:bold; 
} 

JS:

<script> 
$(document).ready(function(){ 
    $('#minibar a').click(function(){ 
     var el = $(this).attr('href'); 
     var offset = $(el).offset(); 
     var top = offset.top - 100; 
     $('body,html').animate({scrollTop:offset.top,scrollLeft:offset.left},500); 
     return false;  
    }); 
}); 
</script> 

Answer 1

var el = $(this.getAttribute('href')); 

Или с JQuery:

var el = $($(this).attr('href')); 

LIVE DEMO

$(document).ready(function(){ 
    $('#minibar a').click(function(e){ 
     e.preventDefault(); 
     var el = $(this.getAttribute('href')); 
     var offs = el.offset(); 
     $('html, body').stop().animate({ scrollTop: offs.top-100 },500);  
    }); 
}); 

Вы никогда не используете свой top вар, и я действительно не знаю, почему scrollLeft. Используйте его, если вам это необходимо:

$('html, body').stop().animate({ 
    scrollTop: offs.top-100, 
    scrollLeft: offs.left 
},500); 

Answer 2

Найдено, что положение: фиксированное; был установлен для html в таблице стилей. Удалено, и анимация работала так, как было разработано. Спасибо за помощь!