jquery動畫在x和y軸上滾動

我想用jquery做一個動畫從一個div到另一個div。我在那裏一半，但似乎無法讓它在兩個軸上滾動。我已經調用了scrollto插件並且願意使用它。下面是現場直播，代碼：http://littleboxcreative.com/jquery動畫在x和y軸上滾動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Little Box Creative</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css" /> 
<link rel="stylesheet" type="text/css" href="formValidator/validationEngine.jquery.css" /> 
<link rel="stylesheet" type="text/css" href="demo.css" /> 




<script type="text/javascript" src="js/jquery.jqtransform.js"></script> 
<script type="text/javascript" src="js/jquery.validationEngine.js"></script> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="script.js"></script> 
<script type="text/javascript" src="/js/jquery-ui.js"></script> 
<script type="text/javascript" src="/js/jquery-scrollTo.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('a[href*=#]').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) { 
    var $target = $(this.hash); 
    $target = $target.length && $target 
    || $('[name=' + this.hash.slice(1) +']'); 
    if ($target.length) { 
    var targetOffset = $target.offset().top; 
    $('html,body') 
    .animate({scrollTop: targetOffset}, 1000); 
    return false; 
    } 
} 
    }); 
}); 
</script> 


</head> 




<body> 



<div id="main"> 
    <div id="mainwrap1"> 
    <div id="logo"> 
    </div> 
    <div id="tagline"> 

     <div class="tagline1"> 
     </div> 
    <div id="headline"> 
    </div> 
    <a href="#mainwrap2"> 
     <div class="tagline2"> 
     </div> 
    </a>  




    </div> 
    </div> 

    <div id="mainwrap2"> 





    </div> 
</div> 



<div id="body"> 
     <div id="services"> 

     </div> 

     <div id="portfolio"> 

     </div> 
    <div id="innerbody"> 
     <div id="welove"> 

     </div> 
    </div> 
</div> 

</body> 
</html>

來源

2010-10-03 Davey

$ .scrollTo有一個真棒演示頁面： http://demos.flesler.com/jquery/scrollTo/

我在你上面的代碼，你實際上並沒有使用$ .scrollTo注意到，但而不是動畫scrollTop。

取而代之的是：

$('html,body').animate({scrollTop: targetOffset}, 1000);

我會用下面，讓$target您試圖滾動到元素（您不必擔心計算其偏移，我覺得默認的是滾動兩軸）：

$.scrollTo($target, 1000);

或者，如果您想更詳細：

$.scrollTo($target, { duration: 1000, axis: 'xy' });

來源

2010-10-03 22:01:50 JKS

當我做這個替換我失去了動畫，它只是跳轉到div。 – Davey 2010-10-03 22:59:51

我做了替換，它按預期工作：http://jsfiddle.net/khghQ/ – JKS 2010-10-04 18:03:03

啊，它是！多謝，夥計。 – Davey 2010-10-04 20:30:07

jquery動畫在x和y軸上滾動

回答

相關問題