Jimdo Button als Anker

07.09.2018 11:39
avatar  Charles
#1
avatar

Ich Versuche einen Jimdo-Button als Anker zu benutzen mit folgendem Code:

1
2
3
4
5
 
<div id="cc-m-11427268297" class="j-module n j-callToAction "><div class="j-calltoaction-wrapper j-calltoaction-align-1">
<a class="j-calltoaction-link j-calltoaction-link-style-1" data-action="button" href="#Anker-Name" target="_blank" data-title="Jetzt mehr erfahren">
Jetzt mehr erfahren </a>
</div>
</div>
 



Leider öffnet sich der Anker dann immer in einem neuen Tab und scrollt nicht einfach zum Anker.
Wie kann ich das lösen?

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
07.09.2018 13:14 (zuletzt bearbeitet: 07.09.2018 14:38)
avatar  Charles
#2
avatar

Ich habe auch ein Matrix-Theme installiert welches schon ein Javascript nutzt, da kriege ich den scroll animation code auch nicht zum laufen:

1
2
3
 

Code-Snippets und Skripte von Matrix-Theme bitte nicht hier posten, die sind copyright-geschützt.
 
 

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
07.09.2018 14:37 (zuletzt bearbeitet: 07.09.2018 14:41)
avatar  az_
#3
avatar
az_

Dein Code ist richtig. Du könntest Ihn aber verbessern:

1
2
3
4
5
6
7
8
9
10
11
12
 

 
<div id="mybutton1" class="j-module n j-callToAction ">
<div class="j-calltoaction-wrapper j-calltoaction-align-1">
<a class="j-calltoaction-link j-calltoaction-link-style-1" data-action="button"
href="#Anker-Name"
target="_self" data-title="Jetzt mehr erfahren">Jetzt mehr erfahren</a>
</div>
</div>
 

 
 



Was Du jetzt noch brauchst, ist der Anker selbst - ein Stück weiter auf der Seite:

1
2
3
4
5
 

<div id="Anker-Name" class="anker">
</div>
 

 



class="anker" ist die Klasse für die Sprungmarke, die kannst Du z.B. absolut positionierenund mit negativem margin ausstatten, wenn Du die Navigation brücksichtigen musst.

target="_self" bleibt auf der aktuellen Seite, target="_blank" öffnet einen neuen Tab im Browser.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
07.09.2018 15:23 (zuletzt bearbeitet: 10.09.2018 08:20)
avatar  Charles
#4
avatar

Jetzt klappt der Anker, aber wie kriege ich die scroll animation hin?
Wenn ich den Code von dem Jimo-Tutorial nehme für die OnePage Seiten, klappen meine Matrix-Themes widgets nicht mehr:

Code vom Jimdo Tutorial:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<script type="text/javascript">
 
//<![CDATA[
 
$(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
}, 1000);
return false;
}
}
});
});
 
//]]>
 
</script>
 

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
09.09.2018 12:45
avatar  Charles
#5
avatar

@ az_
Weißt du wie ich den matrix Code und den smooth scroll verbinden kann?

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
09.09.2018 18:06 (zuletzt bearbeitet: 09.09.2018 18:06)
avatar  Charles
#6
avatar

Habs hinbekommen, einfach jeden Code probiert den ich finden konnte.
Mit dem hat es geklappt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top //no need of parseInt here
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
}(jQuery));
//]]>
</script>
 

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
10.09.2018 08:22
avatar  az_
#7
avatar
az_

...das ist ein guter Tipp für alle, die Matrix Themes benutzen!


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
10.09.2018 10:14
avatar  Charles
#8
avatar

Keine Ahnung ob der Code bei jedem Template funktioniert. Bei Alsten gehts.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!