Javascript Make scroll使div一直滚动？

我有一个只有水平溢出的div。通过div外部的链接，我试图将div滚动到某个特定的图像（想象一下向右滚动的水平图库）

我使用了以下javascript。它在网页中运行良好

但是，包含库的DIV比大多数图像都大。因此，浏览器窗口只会滚动，直到请求的div从右侧进入，并且现在完全显示在屏幕上，而不是多显示一个像素。但是，我希望div一直滚动，这样图像就一直紧靠容器的左边缘

我希望我说的有道理，我没有太多的经验，但我无法在网上找到我问题的答案

$（文档）.ready（函数（）{
$（'#gimg1'）。单击（函数（）{
$.scrollTo（$（'gimg1link'），1000）；
});
$（'#gimg2'）。单击（函数（）{
$.scrollTo（$（'gimg2link'），1000）；
});
$（'#gimg3'）。单击（函数（）{
$.scrollTo（$（'gimg3link'），1000）；
});
$（'#gimg4'）。单击（函数（）{
$.scrollTo（$（'gimg4link'），1000）；
});
});
您在jquery中使用的图像和链接选择器顺序错误

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

此代码段表示“单击图像时，滚动到链接的位置”。你想让它反过来：点击链接时，滚动到图像

反转这些选择器可以提供一个工作滑块：

最后一个图像将始终保持在屏幕的右侧，因为这是文档结束的地方，它不能再滚动了。只要文档宽度允许，其他图像将一直向左滚动


此外，通过不复制粘贴相同的代码，而只是使其更通用，您可以对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
    });
});

现在，添加多少链接和图像无关紧要，只要它们都使用相同的命名约定。
基于此，我修改了代码以满足您的需要。它使用单击的缩略图索引查找相应的图像
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);
});

工作小提琴：
如果你也能提供css，那就太好了！他想要的是向左滚动元素，因此他不能使用
scrollTo
，而是将元素
left
位置手动设置为滚动位置非常感谢您花时间回答！完美的这正是我所需要的，我喜欢代码的最小化。