Bootstrap en Jquery ScrollTop probleempje

[Baljuin]

Hallo,

Ik zit met een probleem waar ik als javascript-leek niet uit kom.

Ik heb 6 knoppen in het groen staan. Met een klik verandert de knop naar oranje en blijft daar staan door de data-toggle="buttons" functie van Bootstrap.
Alleen wil ik graag dat een klik er ook voor zorgt dat de website naar onder toe scrollt waar de containers staan.

Dit werkt al wel gedeeltelijk! Als je op het eerste pictogram klikt dan scrollt hij met een scriptje in script.js mooi naar onder. Alleen blijft ie niet op oranje staan. De andere knoppen blijven wel op oranje staan, maar ik heb die scrollTop functie er nog niet ingezet.
Waarschijnlijk kunnen beide functies niet naast elkaar bestaan en moet ik ze op de 1 of andere manier met elkaar combineren. Maar hoe... Kan iemand mij helpen?

De pagina waar het om gaat: http://test.royromviel.nl/index.html

 

[Baljuin]

Oke, Ik heb het zelf al opgelost IPV van heel moeilijk denken heb ik de Tabs plugin van Bootstrap gebruikt en een stukje javascript aan een Bootstrap functie toegevoegd.

Check it:

Tab.prototype.activate = function (element, container, callback) {
    var $active    = container.find('> .active')
    var transition = callback
      && $.support.transition
      && $active.hasClass('fade')

    function next() {
      $active
        .removeClass('active')
        .find('> .dropdown-menu > .active')
        .removeClass('active')

      element.addClass('active')

      if (transition) {
        element[0].offsetWidth // reflow for transition
        element.addClass('in')
      } else {
        element.removeClass('fade')
      }

      if (element.parent('.dropdown-menu')) {
        element.closest('li.dropdown').addClass('active')
      }

      callback && callback()
    }

    transition ?
      $active
        .one($.support.transition.end, next)
        .emulateTransitionEnd(150) :
      next()

    $active.removeClass('in');
	
	/* vanaf hier mijn code */
		
		var posi = $('#containerkiezen').offset().top;
		$('html,body').animate({
                 scrollTop: posi
            }, 500, 'easeInOutQuart');

	/* tot hier mijn code */
  }