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的位置”。你想要它反过来：当点击链接时，滚动到图像。

撤消这些选择器会为您提供一个工作滑块：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
    });
});

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

Answer 2

基于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/

制作scrollTo使div一直滚动？

2 个答案: