オーバーフロースクロールでdiv内のアニメーションスクロール

Question

私はアニメーションスクロールID関数を使用しています。これは、ページ全体で本当にうまく動作し、ページ内の特定のIDを持つ別の要素に移動します。私ができるようにしたいのは、高さ450、幅910、オーバーフローy：スクロールセットを持つ特定のdivに制限されたスクロールです。

リンクを入れ

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

あなたはparent_idは、あなたがオーバーフローを持つ特殊なdiv要素であり、位置は親要素に対する相対ではなく、ページに相対的であるため、代わりに.position()を使用して、この

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

のようなものを試してみました。

Answer 2

ShadowScripterの答えは近く、偉大な出発点でしたが、あなたは一番下の位置、クエリ

$（「＃」+ ID）.position（）にスクロールした場合ことに気づくでしょう。 top

は、一番下の要素の上にある要素に対して負の数を返します。 position（）。先頭へは、親の上の相対的な値を返します。また、オーバーフローのdivでは、相対的な上の位置が親の上の上の位置よりも小さくなる可能性があるためです。

解決策の1つは、ビューポートサイズを考慮した余分な計算を行うことです。私の目的のために

、単に、ページの読み込みが完了したときに、すべてのトップを記録し、そのデータ構造からの位置をつかむために簡単だった：

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