jQuery ('html.body' )，动画不起作用

Question

我有一个包含三个 div 的页面。我想使用 animate 和每个 div 的偏移位置将每个 div 放入 View 中。我可以看出正在传递链接属性，并且我正在获取偏移量数字。 (通过 window.alerts 验证)问题是，div 容器不会移入 View 。

这是链接

<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

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