Анимированная прокрутка в div с прокруткой переполнения

Question

Я использую анимированную прокрутку для функции id, которая отлично работает для всей страницы, переходя к различным элементам с определенными идентификаторами на странице. То, что я хотел бы сделать, это иметь прокрутку, ограниченную определенным div, который имеет высоту 450, ширину 910 и переполнение-y: набор прокрутки.

function goToByScroll(id){ 
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); 
} 

, а затем положить в ссылке:

<a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a> 

пример с этой страницы http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/comment-page-2/#comment-41618

Мне нравится, как просто это, и в надежде, что может быть в основном сохраняется (очевидно, это будет более активное участие, чем сейчас). Было бы здорово, если бы он мог поддерживать функциональность прокрутки до элемента в любом месте страницы, но также иметь ссылку, в которой div с переполнением также просматривается только. Заранее спасибо за любую помощь, которую сообщество может мне дать.

Answer 1

Вы пробовали что-то вроде этого

function specific_goToByScroll(parent_id, id){ 
    $("#"+parent_id).animate({scrollTop: $("#"+id).position().top}, 'slow'); 
} 

Где parent_id это вам специальный DIV с переливом, и использовать вместо .position(), потому что положение относительно родительского элемента, а не по отношению к странице.

Answer 2

ответ ShadowScripter близка и была отличной отправной точкой, но вы заметите, что если вы прокрутите до нижнего положения, запрос

$ («#» + идентификатор) .position(). top

возвращает отрицательное число для элементов, расположенных над самым нижним элементом. Это связано с тем, что position(). Top возвращает значение относительно верхней части родителя, а в div переполнения относительное верхнее положение может быть меньше вершины верхней части родителя.

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

Для моих целей это было проще просто записать все вершины, когда страница загрузится, а затем захватить позицию из структуры данных:

var anchors = ['target01', 'target02', 'target03']; 
var positions = {}; 

window.onload = function() { 

    for (var i = 0; i < anchors.length; i++) { 
     var id = anchors[i]; 
     positions[id] = $("#" + id).position().top; 
    } 
}; 

function scrollInOverflowDiv(parentID, id) { 

    var pos = positions[id]; 
    $("#" + parentID).animate({scrollTop: pos}, 'slow'); 
}