jQuery（'html.body'），动画不起作用答案

【问题标题】：jQuery ('html.body'),animate not workingjQuery（'html.body'），动画不起作用
【发布时间】：2013-03-06 23:29:36
【问题描述】：

我有一个包含三个 div 的页面。我想使用动画和每个 div 的偏移位置将每个 div 带入视野。我可以告诉链接属性正在被传递，并且我得到了偏移量。（通过 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

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

【问题讨论】：

也许“offset”有错误的数据你检查了吗？
您设置了top = offset.top - 100，但从不使用该变量。
是的，这是一次正确定位的尝试。我对这些值进行硬编码坐标。

标签： jquery animation scrolltop

【解决方案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);

【讨论】：

仍然无法使用您建议的代码。我想将 offs.left 用于其他 div 位置。顶部 var 是一个调整。css 中是否存在阻止动画的内容？在这方面有什么需要注意的吗？
@KDW 我不知道为什么它不起作用，我几乎不会在我的答案中发布根本不起作用的东西。这是一个演示：jsbin.com/ezakin/3/edit
hi @roXon 您的示例完美运行，这是我的开发站点[链接]positionmarketinggroup.com/html/… 一定有一些冲突。我已经注释掉了一些试图缩小范围的元素。我在链接和内容周围有一个 div 容器，但即使将其删除，动画似乎也没有效果。

【解决方案2】：

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

【讨论】：