#1

Tom

Eroberer  (71 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 https://www.tomadesign.ch

Navigation auf Abschnitt mit Ankerpunkt

Hallo zusammen

Bei praktisch allen Designs (Ausnahme OnePager) gibt es keine Möglichkeit zuoberst auf die Seite zu springen. Deshalb suche ich einen Weg einen Abschnitt, welcher als Ankerpunkt festgelegt ist, anzusteuern.

Doch wie kann ich diesen Ankerpunkt ansteuern? Wie kann man generell eine Abschnitt ansteuern?

In der Verlinkung erscheint dieser ja nicht.

Danke für Hilfe
Tom

#2

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Das Thema hatten wir schon mehrfach zB HIER.

Bitte immer zuerst die Forumsuche anwenden. Danke für dein Verständis.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#3

Tom

Eroberer  (71 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 https://www.tomadesign.ch

 Hallo Marjorie

Merci für deinen Link. Ich hatte schon versucht dieses Thema über die Suchfunktion zu finden und wurde nicht fündig (Stichworte Absatz Ankerpinkt Navigation).

Was mir unklar ist: Der Link funktioniert, doch es macht mir ein neues Fenster auf. Das wurde dort auch diskutiert, doch ich wurde aus den Beschreibungen nicht schlau, wie man das anstellen kann, dass es KEIN NEUES FENSTER ÖFFNET. Der Hinweis mit "target=_blank" bringt mich nicht weiter. Unter der Verlinkung muss eine WWW-Adresse eingegeben werden, denn anderes wird ja nicht akzeptiert.

Tom

#4

piotr

Forum-Sponsor  (250 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.tukhut.nl

#5

Tom

Eroberer  (71 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 https://www.tomadesign.ch

 Hallo Piotr

Du bis von Karo-Design? (weil copyright Karo).
Danke, ja, für Top und Bottom-Navigation wäre das sehr gut. Doch woher nehme ich den Code?
Ich finde den Link zum Beitrag nicht, resp. du hast den wohl nicht verlinkt im 2. Satz?

 

Tom

#6

piotr

Forum-Sponsor  (250 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.tukhut.nl

schaue nochmal in meinem letzten Beitrag,
hatte dort den Link vergessen ... ist jetzt aber da ...

Und nein, ich bin nicht von Karo.
Du siehst dort jedoch das Vertika Design von Karo 😉.


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »piotr« (22.09.2020, 14:17)
#7

Tom

Eroberer  (71 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 https://www.tomadesign.ch

Habe den html code in Siquando kopiert und ich kann die Seite nicht mehr auf Server hochladen. Du siehst, ich bin betr. html-code ziemlich lost in space.
Kann ich nicht einfach einen Code kopieren und in Siquando unter HTML-Clip einfügen? Die Doppelpfeile, die du auf deiner Seite hast wären super.

#8

piotr

Forum-Sponsor  (250 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.tukhut.nl

1. Wähle eine Seite aus wo du deine "nach oben"- und "nach unten"-Funktionalität eintragen möchtest.

2. Füge als erstes Element auf dieser Seite einen HTML-Absatz ein mit der folgenden Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
.evendown {
 font-size: 36px;
 font-weight: bold;
 margin-bottom: 0px;
 color: #FE0300;
 text-align: center;
 valign: middle;
}
.evendown:hover {
 color: #528DDD;
}
.evenup {
 font-size: 36px;
 margin-top: 0px;
 margin-bottom: 00px;
 color: #FE0300;
 text-align: center;
 valign: middle;
}
.evenup:hover {
 color: #528DDD;
}

 @keyframes fa-blink {
   0% { opacity: 1; }
   25% { opacity: 0.75; }
   50% { opacity: 0.5; }
   75% { opacity: 0.25; }
   100% { opacity: 0; }
 }
.fa-blink {
  -webkit-animation: fa-blink 1.75s linear infinite;
  -moz-animation: fa-blink 1.75s linear infinite;
  -ms-animation: fa-blink 1.75s linear infinite;
  -o-animation: fa-blink 1.75s linear infinite;
  animation: fa-blink 1.75s linear infinite;
}

</style>


<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
scrollingElement = (document.scrollingElement || document.body)

function scrollToBottom () {
  scrollingElement.scrollTop = scrollingElement.scrollHeight;
}

function scrollToTop (id) {
  scrollingElement.scrollTop = 0;
}

//Require jQuery
function scrollSmoothToBottom (id) {
  $(scrollingElement).animate({
   scrollTop: document.body.scrollHeight
  }, 500);
}

//Require jQuery
function scrollSmoothToTop (id) {
  $(scrollingElement).animate({
   scrollTop: 0
  }, 500);
}
</script>

<div class="evendown"><i onClick="scrollSmoothToBottom()" class="fa fa-angle-double-down fa-blink"></i></div>


3. Füge als letztes Element auf dieser Seite einen HTML-Absatz ein mit der folgenden Code:

<div class="evenup"><i onClick="scrollSmoothToTop()" class="fa fa-angle-double-up fa-blink"></i></div>


4. Und das war es schon 😉. Have fun!

#9

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Funktioniert tadellos. Habs am Wochenende eingebaut. Danke Piotr.


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.

#10

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Kann mir bitte mal jemand erklären was die "Nach Oben Funktion" mit dem Anfangsthema "Navigation auf Abschnitt mit Ankerpunkt" zu tun hat??


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#11

piotr

Forum-Sponsor  (250 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.tukhut.nl

Schon in dem ersten Satz steht: "Bei praktisch allen Designs (Ausnahme OnePager) gibt es keine Möglichkeit zuoberst auf die Seite zu springen". 
Aber diese Möglichkeit gibt es anscheinend doch. Und zwar mittels der Code die ich in diesem Beitrag nochmals gezeigt habe.
Diese Vorgehensweise ist weitgehend einfacher und eleganter als sub-sub-optimal auf einem Absatz zu verlinken.

C'est tout ma chère.

#12

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Dann werde ich den Titel anpassen, denn diesen wirkt sehr verwirrend.

 


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#13

piotr

Forum-Sponsor  (250 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.tukhut.nl

#14

Tom

Eroberer  (71 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 https://www.tomadesign.ch

 Piotr, merci, doch entweder bin ich zu blöd oder irgendeine EInstelung will nicht. Sobald ich deinen Code hineinkopiert habe und die Site speichern will erscheit dieer Fehler.

mceclip0.png

#15

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
scrollingElement = (document.scrollingElement || document.body)

function scrollToBottom () {
 scrollingElement.scrollTop = scrollingElement.scrollHeight;
}

function scrollToTop (id) {
 scrollingElement.scrollTop = 0;
}

//Require jQuery
function scrollSmoothToBottom (id) {
 $(scrollingElement).animate({
  scrollTop: document.body.scrollHeight
 }, 500);
}

//Require jQuery
function scrollSmoothToTop (id) {
 $(scrollingElement).animate({
  scrollTop: 0
 }, 500);
}
</script>

<div class="evendown"><i onClick="scrollSmoothToBottom()" class="fa fa-angle-double-down fa-blink"></i></div>

Ich habe oben nur den Teil des Codes drin?


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.

#16

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

Stopp, sorry falsch ich kann es nicht löschen. 😢 Halt mich jetzt raus. 


Ihr könnt mich jederzeit über Facebook kontaktieren. Danke an die Forenmitglieder, die mich kontaktieren.

#17

piotr

Forum-Sponsor  (250 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.tukhut.nl

Tom,

Das kann vieles bedeuten. Kann jetzt nicht direkt sagen woran es bei dir liegt.

Erstmal das Siquando Pro Programm beenden.
Dann das Cache in deinem Browser lehren.
Dann nochmal dein Projekt starten.
Und nochmal den HTML Absatz versuchen anzulegen.

Wenn dies nicht geht. Dann erstmal eine separate Seite (also nicht "Home") anlegen.
Dort einen langen Absatz mit BlaBla-Text eingeben.
Dort auch die beiden HTML-Absätze anlegen.

Keep me posted, Piotr.

P.S.: sonst kann ich dir über Teamviewer helfen und die gefundene Lösung wird dann hier im Forum mitgeteilt.

#18

Tom

Eroberer  (71 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 https://www.tomadesign.ch

 Hoi Piotr

 

DANKE für deinen langen Atem, dass ich dir mit meinem Problem noch nicht auf den Wecker gegangen bin 😉.
Zum Browser komme ich nicht einmal. Sobald ich den Code paste und die Site speichere erscheint dieser Fehler.
Kann das an meinem Provider, sprich an dessen Servereinstellung liegen? Siehe Fehlermeldung.
mceclip0%20%281%29.png

 

Und ja, sehr gerne können wir über TeamViewer.

 

#19

piotr

Forum-Sponsor  (250 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.tukhut.nl

#20

Merlin2504

Vielfrager  (1542 Punkte)  ·   männlich  ·   Deutschland

#21

Tom

Eroberer  (71 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 https://www.tomadesign.ch

 ja, ich denke ich belästige einmal den Server/Hoster... Merci bis dahin!!!

344 Aufrufe | 21 Beiträge