使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 
    }); 
}); 

现在不要紧多少链接和图像，你添加，只要他们都使用相同的命名约定。