Make scrollTo make div scroll all the way?

Question

I have a div with only horizontal overflow. With a link outside the div, I'm trying to scroll the div to a certain image (think of a horizontal gallery scrolling to the right).

I used the following javascript. It works fine in the webpage.

However, the DIV containing the gallery is larger than most images. Consequently the browser window will scroll only until the requested div comes in from the right and is now fully on screen, and not one pixel more. However, I would like the div to scroll all the way, so that the image is all the way hugging the left edge of the container.

I hope I'm making sense, I'm not terribly experienced, but I couldn't find an answer to my question online.

$(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

Based on this answer i adapted the code to suit your need. It uses the clicked thumbnail index to find the corresponding image left, and set scrollLeft of the viewport to this value.

$('#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);
});

Working fiddle: http://jsfiddle.net/Lqvqtwtb/

Answer 2

You are using the image and link selectors in your jquery in the wrong order.

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

This snippet means "when the image #gimg1 is clicked, scroll to the position of the link #gimg1link". You want it the other way round: when the link is clicked, scroll to the image.

Reversing those selectors gives you a working slider: jsFiddle

The last image will always stay on the right of the screen, because that's where the document ends and it can't scroll any further. The other images will scroll all the way to the left as long as your document width allows it.

---

Also, you could optimize your javascript a lot by not copy-pasting the same code but just making it more generic:

$(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
    });
});

Now it doesn't matter how many links and images you add, as long as they all use the same naming convention.