我如何滾動到圖片點擊鏈接使用jquery - 滾動到

Question

我想通過點擊鏈接滾動圖片庫，所以點擊「凱利」鏈接將滾動到她在畫廊的照片？

這是據我已經得到了：

HTML：

<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

你可以使用你想要滾動到像這樣div的選擇：

$(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 
});