2

我有一个包含三个 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>
4

2 回答 2

1

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

于 2013-03-07T11:09:54.470 回答
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);    
   });   
});

你从来没有使用你的topvar，我真的不知道为什么scrollLeft. 如果需要，请使用它：

$('html, body').stop().animate({
    scrollTop: offs.top-100,
    scrollLeft: offs.left
},500);
于 2013-03-06T23:42:10.637 回答