jQuery（'html.body'），动画无法正常工作

我有一个三个div的页面。编号喜欢把每个div使用动画和每个div的偏移位置查看。我可以告诉链接属性被传递，我得到偏移号码。（通过window.alerts验证）问题是，div容器不会移动到视图中。jQuery（'html.body'），动画无法正常工作

这里是链接

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

来源

2013-03-06 KDW

也许“抵消”有错误的数据，你检查？ – Wolfii 2013-03-06 23:31:32

您设置了'top = offset.top - 100'，但从不使用该变量。 – JJJ 2013-03-06 23:32:17

是的，这是一个尝试正确的定位。我为这些值硬编码坐标。 – KDW 2013-03-07 00:12:54

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

来源

2013-03-06 23:42:10

仍然无法使用您建议的代码。我想用offs.left作为其他div位置。最上面的var是一个调整。在css中是否存在阻止动画的东西？在这方面需要寻找什么？ – KDW 2013-03-07 00:18:02

@KDW我不知道为什么它不应该工作，我几乎不会在我的回答中发布一些根本不起作用的东西。这里有一个演示：http://jsbin.com/ezakin/3/edit – 2013-03-07 00:30:40

嗨@roXon你的例子完美的作品，这是我的发展网站[link] http://www.positionmarketinggroup.com/html/main.isx？ sitesec = 0.0.0.0＆set_sitemode = 3必须有一些冲突。我已经评论了一些试图缩小可能性的因素。我在链接和内容周围有一个div容器，但即使删除了该动画，该动画也没有任何效果。 – KDW 2013-03-07 03:36:39

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

来源

2013-03-07 11:09:54 KDW

jQuery（'html.body'），动画无法正常工作

回答

相关问题