Question

我有一个包含三个div的页面。我想使用animate和每个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>

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

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 var，我真的不知道为什么scrollLeft。如果需要，请使用它：

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

Answer 2

找到一个位置：固定;在样式表中为html设置。删除它，动画按设计工作。谢谢您的帮助！

jQuery（'html.body'），动画不工作

2 个答案: