JavaScript ile Sayfa Çapaları Arasında Gezinmek

Sayfanızda dinamik pozisyona sahip birden çok çapa olması halinde tek bir buton ile arasında gezinmek isteyebilirsiniz. Bu durumda ilk başta tüm ID'leri bir diziye toplamanız ve ardından dizi içerisindeki nesneleri kontrol ederek tek tek gezmeniz gerekmektedir. Örnek kod aşağıdadır: 

Not: jQuery dependant yazılmıştır.

HTML:

    <div style="position:fixed; background: white; border: 1px solid black; right: 15px;">

        <a style="cursor: pointer;" id="tiklat">Tıkla ve Zıpla</a>

    </div>

    <a class="zipla" id="1"></a>

    <p style="height: 750px;">Lorem ipsum dolor sit amet...</p>

    <a class="zipla" id="2"></a>

    <p style="height: 350px">Lorem ipsum dolor sit amet...</p>

    <a class="zipla" id="3"></a>

    <p style="height: 750px">Lorem ipsum dolor sit amet...</p>

JavaScript:

        var mevcutHedef = 0;

        var hedefler = new Array();

        $(".zipla").each(function () {

            hedefler.push($(this).attr('id'));

        });

        $("#tiklat").click(function () {

            if (mevcutHedef < hedefler.length) {

                $("html, body").animate({ scrollTop: $('#' + hedefler[mevcutHedef]).offset().top }, 1000);

                mevcutHedef++;

                if (mevcutHedef >= hedefler.length) {

                    mevcutHedef = 0;

                }

            }

        });