2013-03-06 175 views
2

我有一個三個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> 
+0

也許「抵消」有錯誤的數據,你檢查? – Wolfii 2013-03-06 23:31:32

+0

您設置了'top = offset.top - 100',但從不使用該變量。 – JJJ 2013-03-06 23:32:17

+0

是的,這是一個嘗試正確的定位。我爲這些值硬編碼座標。 – KDW 2013-03-07 00:12:54

回答

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

仍然無法使用您建議的代碼。我想用offs.left作爲其他div位置。最上面的var是一個調整。在css中是否存在阻止動畫的東西?在這方面需要尋找什麼? – KDW 2013-03-07 00:18:02

+0

@KDW我不知道爲什麼它不應該工作,我幾乎不會在我的回答中發佈一些根本不起作用的東西。這裏有一個演示:http://jsbin.com/ezakin/3/edit – 2013-03-07 00:30:40

+0

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

1

發現一個位置:fixed;在樣式表中爲html設置。 刪除那個和動畫按設計工作。謝謝您的幫助!