Bootstrap en Jquery ScrollTop probleempje

Status
Niet open voor verdere reacties.

Baljuin

Gebruiker
Lid geworden
28 aug 2008
Berichten
50
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
 
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:
Code:
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 */
  }
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan