使scrollTo使div一直滾動？

Question

我有一個只有水平溢出的股利。通過div之外的鏈接，我試圖將div滾動到某個圖像（想象一下水平畫廊向右滾動）。

我用下面的javascript。它在網頁中工作正常。

但是，包含圖庫的DIV大於大多數圖像。因此，瀏覽器窗口只會滾動，直到請求的div從右側進入，現在完全在屏幕上，而不是一個像素以上。但是，我希望div一直滾動，以便圖像一直緊貼容器的左邊緣。

我希望我有道理，我不是非常有經驗，但我無法在網上找到我的問題的答案。

$(document).ready(function(){ 
 
$('#gimg1').click(function() { 
 
    $.scrollTo($('#gimg1link'), 1000); 
 
}); 
 
$('#gimg2').click(function() { 
 
    $.scrollTo($('#gimg2link'), 1000); 
 
}); 
 
$('#gimg3').click(function() { 
 
    $.scrollTo($('#gimg3link'), 1000); 
 
}); 
 
$('#gimg4').click(function() { 
 
    $.scrollTo($('#gimg4link'), 1000); 
 
}); 
 
});

<div id="gallery"> 
 

 
      <img class="galleryimage" id="gimg1" src="lb1.jpg"> 
 

 
      
 

 
      <img class="galleryimage" id="gimg2" src="lb2.jpg"> 
 

 

 

 
      <img class="galleryimage" id="gimg3" src="lb3.jpg"> 
 

 
      
 
     
 
      <img class="galleryimage" id="gimg4" src="lb4.jpg"> 
 

 

 
      
 
    </div> 
 

 
<a href="#gimg1" id="gimg1link">Image 1</a> 
 
<a href="#gimg2" id="gimg2link">Image 2</a> 
 
<a href="#gimg3" id="gimg3link">Image 3</a> 
 
<a href="#gimg4" id="gimg4link">Image 4</a>

Answer 1

基於this answer我改編了適合您需要的代碼。它使用點擊的縮略圖索引找到相應的圖像left，並將視口的scrollLeft設置爲該值。

$('#nav li').click(function(){ 
    var clickedIndex = $(this).index(); 
    var targetElement = $('#viewport ul li').eq(clickedIndex); 
    var elementPosition = targetElement.position(); 
    $('#viewport').animate({scrollLeft: elementPosition.left},500); 
}); 

工作小提琴：http://jsfiddle.net/Lqvqtwtb/

Answer 2

您正在使用錯誤的順序您的jQuery的圖像和鏈接選擇。

$('#gimg1').click(function() { 
    $.scrollTo($('#gimg1link'), 1000); 
}); 

該片段是指「被點擊圖像#gimg1時，滾動至所述鏈路#gimg1link的位置」。您需要反過來：單擊鏈接時，滾動到圖像。

倒車那些選擇給你一個工作滑塊：jsFiddle

最後的圖像將永遠留在了屏幕的右側，因爲這是該文件結束，無法再繼續滾動。只要文檔寬度允許，其他圖像將一直滾動到左側。

---

此外，您還可以優化你的JavaScript很多由沒有複製粘貼相同的代碼，但只是使其更通用：

$(document).ready(function(){ 
    $('a[id^=gimg]').click(function() { // when a link with an ID starting with "gimg" is clicked 
     var linkID = $(this).attr('id'); // get the whole id from this link 
     var imgID = linkID.replace('link', ''); // get the img ID it relates to by removing the 'link' part 
     $scrollTo($('#' + imgID), 1000); // scroll to the image this link belongs to 
    }); 
}); 

現在不要緊多少鏈接和圖像，你添加，只要他們都使用相同的命名約定。