oefeningToevoegenJs.js

//jquery via http://jsfiddle.net/shlomohassid/6r1h687k/

$(function(){

    var pagePositon = 0,
        sectionsSeclector = 'section',
        $scrollItems = $(sectionsSeclector),
        offsetTolorence = 30,
        pageMaxPosition = $scrollItems.length - 1;

    //Map the sections:
    $scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });

    // Bind to scroll
    $(window).bind('scroll',upPos);

    //Move on click:
    $('#arrow a').click(function(e){
        if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
            pagePositon++;
            $('html, body').stop().animate({
                  scrollTop: $scrollItems.eq(pagePositon).offset().top
            }, 300);
        }
        if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
            pagePositon--;
            $('html, body').stop().animate({
                  scrollTop: $scrollItems.eq(pagePositon).offset().top
              }, 300);
            return false;
        }
    });

    //Update position func:
    function upPos(){
       var fromTop = $(this).scrollTop();
       var $cur = null;
        $scrollItems.each(function(index,ele){
            if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
        });
       if ($cur != null && pagePositon != $cur.data('pos')) {
           pagePositon = $cur.data('pos');
       }
    }

});


$("#slider").roundSlider({
    sliderType: "min-range",
    handleShape: "round",
    width: 30,
    radius: 80,
    value: 5,
    circleShape: "pie",
    startAngle: 315,
    max: "10"
});

$("#slider2").roundSlider({
    sliderType: "min-range",
    handleShape: "round",
    width: 30,
    radius: 80,
    value: 5,
    circleShape: "pie",
    startAngle: 315,
    max: "10"
});