jQuery Accordion / ScrollTo

**tyler** · 11.10.2013, 17:12

Hallo zusammen :-)

Nach stundenlanger googelei bin ich jetzt soweit, dass ich doch das Forum bemühen muss...
Auf meiner Seite www.zehelein-schemm.de arbeite ich viel mit dem jQuery Accordion. Das Problem: Die Inhalte des Accordions sind zumeist größer als das Fenster. Wenn man nun nach unten scrollt und das nächste Accordion anklickt, schiebt es sich nach oben (weil das andere geschlossen wird).
Ich möchte nun das Template entsprechend anpassen, sodass die Seite zum aktiven Toggler nach oben springt.

Soweit so gut. Ich weiß es gibt im Internet viele Artikel dazu, ich habe unter anderem diese Erweiterung für jQuery gefunden: http://balupton.github.io/jquery-scrollto/. Es scheint wohl eine der praktikabelsten Lösungen für das Problem (zumindest bei jQuery) zu sein (vielleicht geht es aber noch einfacher?). Die Erweiterung ist bereits eingebunden. Leider habe ich aber keine Ahnung von javascript und weiß daher auch nicht welcher Code an welcher Stelle einzubinden ist.

Das j_accordion Template ist soweit noch jungfräulich:

Code:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
    });
  })(jQuery);
</script>

Ich danke euch jetzt schon für eure Hilfe. Wer ein bisschen Javascript Erfahrung hat hält meine Frage sicher für bescheuert, aber ich denke ich bin nicht der Erste und Einzige mit dem Problem..

vlg
***

**wulf** · 11.10.2013, 21:49

Code:

.click(function() {
        activate($(this));
        $(this).ScrollTo();
      })

müsste evtl so gehen und achte darauf, dass dein Scroll.Script richtig eingebunden ist (momentan kommt noch ein 404)

**tyler** · 14.10.2013, 13:45

Hallo Wulf,

danke für deine schnelle Antwort!

Das Script ist richtig eingebunden, das habe ich nochmal geprüft... ( http://zehelein-schemm.de/jquery-scr...ry-scrollto.js )

EDIT:
Wenn ich den Code an der beschriebenen Stelle einbinde, scrollt der Bildschirm dorthin bevor sich das vorherige Accordion geschlossen hat. Das heißt, ich lande nicht beim Kopf sondern oftmals mitten drin. Deshalb ist die Beschreibung des scrollTo Skriptes für mich auch nicht zielführend...

Ein Beispiel wie das aussieht:

http://www.zehelein-schemm.de/sortim...erdbeeren.html

Derzeitiger Code:

Code:

...
}).click(function() {
        activate($(this));
        $(this).ScrollTo({
        duration: 1000
        });
...

Der scrollTo soll also erst erfolgen, wenn das vorherige Element schon collapsed ist.

vlg

**wulf** · 14.10.2013, 19:49

du könntest diese Variante ohne scrollTo script ja mal testen

Code:

)
       .
       .
    }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      }).on( "accordionactivate", function( event, ui ) {
         if ($(ui.newHeader).offset() != null) {
         ui.newHeader, $("html, body").animate({scrollTop: ($(ui.newHeader).offset().top)}, 1500);}   
      });

  })(jQuery);

1500 ist die Scrollgeschwindigkeit in ms

**tyler** · 15.10.2013, 11:37

Geht leider nicht. Hier scrollt gar nichts

**wulf** · 15.10.2013, 13:12

Hab es nur hier getestet http://codepen.io/anon/pen/qkDnL, aber vielleicht verhält sich die Testumgebung einfach anders.

**FroschZ1000** · 05.02.2014, 14:55

Ich habe das so gelöst:

Im Template j_accordion.html5 unter der Zeile active: false, folgenden Code eingefügt:

activate: function (event, ui) {
var scrollTop = $(".accordion").scrollTop();
if(!ui.newHeader.length) return;
var top = $(ui.newHeader).offset().top;
$("html,body").animate({
scrollTop: scrollTop + top - 35
}, "fast");
}

Siehe hier: http://www.goetzinger-hoehe.de/pensi...n-sachsen.html

**tyler** · 03.04.2014, 20:05

So sieht das Template jetzt aus. Vielleicht hilft es ja jemandem :-)
Vielen Dank für eure Beiträge!

Code:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
        //alert("in");
        var togt = tog;
        window.setTimeout(function(){
        //alert(that);
        //window.scrollTo(0, $(togt).offset().top);
        $('html').animate({scrollTop : $(togt).offset().top},500);
        }, 500);
        
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      }).on( "accordionactivate", function(event,ui){
         if ($(ui.newHeader).offset() != null) {
         ui.newHeader, $("html, body").animate({scrollTop:($(ui.newHeader).offset().top)}, 1500);}   
      });
    });
  })(jQuery);
</script>