jqueryを使ってリンクをクリックしてギャラリーの画像をスクロールするには - scrollTo

Question

"kellie"リンクをクリックするとリンクをクリックして画像のギャラリーをスクロールできるようにしたい彼女の写真はギャラリーにありますか？

これは私の知る限りが持っているようです：

HTML：あなたはこれを好きにスクロールしたいのdivのセレクタを使用することができます

<ul class="link"> 

<li><a href="images/kellie_200.jpg" >kellie</a></li> 
<li><a href="images/beau_200.jpg" >beau</a></li> 
<li><a href="images/glenda_200.jpg" >glenda</a></li> 
<li><a href="images/mofat_200.jpg" >mofat</a></li> 
<li><a href="images/fader_200.jpg" >fader</a></li> 
<li><a href="images/johnny_200.jpg" >johnny</a></li> 


</ul> 


<div id="gallery"> 

<ul> 


<li><img src="images/kellie_200.jpg" width="200" height="200" /></li> 
<li><img src="images/beau_200.jpg" width="200" height="200" /></li> 
<li><img src="images/glenda_200.jpg" width="200" height="200" /></li> 
<li><img src="images/mofat_200.jpg" width="200" height="200" /></li> 
<li><img src="images/fader_200.jpg" width="200" height="200" /></li> 
<li><img src="images/johnny_200.jpg" width="200" height="200" /></li> 


</ul> 


script: 

$(document).ready(function(){ 

$('.link').click(function(){ 

var $th= $(this); 

var id= $th.attr('href'); 


/*alert(id);*/ 


    $ ('#gallery') .scrollTo(' ??????? ',800); 


    return false; 


    }); 

    }); 

Answer 1

：

$(document).ready(function(){ 
    $('.link').click(function(){ 
     var relation = $(this).attr('href'); 
     $('#gallery').scrollTo($("img[src='" + relation + "']"), 800); 
    }); 
}); 

代わりに、要素のdivセレクタを使用したくない場合は、次のように絶対配置を使用できます。

$('.link').click(function(){ 
    var relation = $(this).attr('href'); 
    var iTop = $("img[src='" + relation + "']").offset().top; 
    var iLeft = $("img[src='" + relation + "']").offset().left; 
    $('#gallery').scrollTo({top: iTop+'px', left: iLeft+'px'}, 800); 
}); 

どちらを使用していても、e.preventDefault関数を使用して、リンクしているパスにhrefのパスが実行されないようにしてください。

$('.link').click(function(e){ 
    e.preventDefault(); 
    //do your scrollTop function 
});