Support » WooCommerce » Scrollen zum Anker mit JQuery (-xpx), Woocommerce Tabs

  • Hallo zusammen,

    dadurch, dass ich einen fixierten Header habe, habe ich im Netz nach einem JQuery Snippet gesucht, welches dazu führt, dass beim Scrollen zu einem Anker auf der Seite eine bestimmte Höhe „weniger“ gescrollt wird. Dies verhindert, dass der fixierte Header dann über dem Text steht, zu dem gescrollt wurde. Ich habe folgendes gefunden und ausprobiert, klappt soweit tadellos:

    	$(function() {
    	  $('a[href*=#]:not([href=#])').click(function() {
    		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    		  var target = $(this.hash);
    		  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    		  if (target.length) {
    			$('html,body').animate({
    			  scrollTop: target.offset().top-150
    			}, 700);
    			return false;
    		  }
    		}
    	  });
    	});

    Problem ist nun aber, dass die Tabs der Woocommerce Produkte nicht mehr geöffnet werden. Habt Ihr eine Idee, wie der Code angepasst werden müsste, damit die Tabs weiterhin funktionieren? JS ist leider nicht so ganz meins…

    Danke Euch!

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)
  • Hallo,
    das Problem kannst du wahrscheinlich wesentlich einfacher mit dem Block Abstandhalter lösen, indem du rechts unter Eigenschaften bei Erweitert > HTML-Anker einen Begriff eingibst, den du dann bei dem Link auf den Anker verwendest.
    Wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    $(function() { … könnte Probleme bereiten, weil WordPress jQuery im no-conflict-mode verwendet und dann das $-Zeichen nicht als Shortcut für jQuery verstanden wird. Besser ist jQuery(function() { ….

    Mit dem Selektor 'a[href*=#]:not([href=#])' fängst du alle Klicks auf Links zu Ankern ab. Damit funktioniert dann auch das WooCommerce-eigene JavaScript zum Wechsel der CSS-Klassen zur Anzeige der Tabs nicht mehr. Du kannst die Tabs aber ausschließen:

    jQuery(function() {
      jQuery('a[href*=#]:not([href=#])').not('.woocommerce a[href*="#tab"]').click(function() { …

    JS ist leider nicht so ganz meins…

    Wir können hier keine Grundkenntnisse (HTML, PHP, JavaScript, CSS, …) vermitteln, weil es den Rahmen eines kostenlosen Support sprengt. Bitte wende dich bei Fragen zu JavaScript-/jQuery-Programmierung an Foren, in denen solche Fragen diskutierrt werden. Den Status des Threads ändere ich auf keine „Support-Frage“.

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)