javascript - アンカータグに到達したときにJavaScript関数を実行する方法は?

Question

functionページ セクションを渡すときにJavaScript を実行することは可能ですか? 私が達成しようとしているのは、Twitter Bootstrap の scrollspy に似たものです。

Answer 1

waypointsプラグインを使用できます：

http://imakewebthings.com/jquery-waypoints/

Waypoints は、要素にスクロールするたびに関数を簡単に実行できるようにする jQuery プラグインです。

Answer 2

これは、必要に応じてカスタマイズできるロジックに基づいてトリガーされる要素にカスタム イベントを登録することにより、探している動作を実現するフィドルです。a

aこの例では、要素の位置がドキュメントの可視部分の上から 0 から 100 の範囲内にあるときに、イベントがトリガーされます。

JS

$(function() {
    $('a').on('reached', function() {
        alert('Reached ' + $(this).attr('id'));
    });
    $(document).on('scroll', function() {
        $('a').each(function() {
            var wt = $(window).scrollTop();
            var at = $(this).position().top;
            var dt = at - wt;
            if( dt >= 0 && dt < 100)
                $(this).trigger('reached');
        });
    });
})

それが役に立てば幸い。

Answer 3

jQueryのscrollTop関数を利用できます。

position() 関数を使用してアンカータグの位置を取得し、それを scrollTop の戻り値と一致させようとします。