javascript - 让scrollTo让div一直滚动？

Question

我有一个只有水平溢出的 div。通过 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

您在 jquery 中以错误的顺序使用图像和链接选择器。

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

这段代码的意思是“当点击图片 #gimg1 时，滚动到链接 #gimg1link 的位置”。您希望反过来:单击链接时，滚动到图像。

反转这些选择器会得到一个有效的 slider :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
    });
});

现在添加多少链接和图像都没有关系，只要它们都使用相同的命名约定即可。