Сделать 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

Основано на 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

Последнее изображение всегда будет оставаться на правой стороне экрана, потому что, когда документ заканчивается, и он не может прокрутить дальше. Остальные изображения будут прокручиваться до упора до тех пор, пока это позволит ширина документа.

---

Кроме того, вы можете оптимизировать яваскрипт много, не копировать-вставить тот же код, но только делают его более универсальным:

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

Теперь это не имеет значения, сколько ссылок и изображений, которые вы добавьте, если все они используют одно и то же соглашение об именах.