2

ページ内の特定の ID を持つさまざまな要素に移動して、ページ全体で非常にうまく機能する id 関数へのアニメーション スクロールを使用しています。私ができるようにしたいのは、高さ450、幅910、およびoverflow-y:scrollが設定された特定の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 を作成したリンクもスクロールのみにすることができます。コミュニティが私に与えることができるかもしれない助けを前もって感謝します。

4

2 に答える 2

3

このようなことを試しましたか

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

ここで、parent_idオーバーフローのある特別なdivを使用.position()します。位置はページではなく親要素を基準にしているため、代わりに使用します。

于 2012-02-28T18:24:05.293 に答える
0

ShadowScripter の答えは近く、素晴らしい出発点でしたが、一番下の位置までスクロールすると、クエリが

$("#"+id).position().top

一番下の要素の上にある要素に対して負の数を返します。これは、position().topが親の上部に相対的な値を返し、オーバーフロー 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');
}
于 2014-07-02T01:09:36.397 に答える