jQuery ('html.body'),animate not working

Question

I have a page with three divs. Id like to bring each div into view using animate and the offset positions of each div. I can tell that the link attribute is being passed and I am getting offset numbers. ( verified with window.alerts ) Problem is, the div containers do not move into view.

Here are the links

<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>

Content divs

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

css for content

.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>

Solution 1

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

Or with 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);    
   });   
});

You were never using your top var, and I really don't know why the scrollLeft. Use it if you need it:

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

Solution 2

Found that a position:fixed; was set for html in the style sheet. Removed that and the animation worked as designed. Thanks for the help!

Comments

[KDW]

Still not working using the code you suggested. I want to use the offs.left for other div positions. The top var was an an adjustment.Could there be something in the css that is preventing animation? Any thing to look for in that regard?

[Roko C. Buljan]

@KDW I don't know why it should not work, I would hardly post in my answer something that does NOT work at all. Here's a demo: jsbin.com/ezakin/3/edit

[KDW]

hi @roXon Your example works perfectly, Here is my development site[link]positionmarketinggroup.com/html/… There must be some conflict. I have commented out some elements trying to narrow down what that might be. I had a div container around the links and content, but even when that is removed the animation appears to have no effect.