WBCE CMS Forum

cyberdyne

Member

Caminar als Onepager

Hallo,
probiere gerade das Template Caminar-wbce als Onepager und entsprechend Menulinks, die auf die diverse #Anker verweisen. Via Headline bekommen die Abschnitte auch eine Überschrift und zusätzlichen Anker. Diese headline, repektive der Abschnitt rutscht mir jedoch unter den Menübalken im Header. Gibt es eine Möglichkeit den Sprung etwas versetzt unter dem Header zu platzieren?

Weitere Frage, hat jemand eine Idee, wie ich diesen Sprung sanft Scrollen lasse? Man kennt es aus Wordpress.

Viele Grüße,
Klaus

---

Macht's gut und danke für den Fisch!

florian

Administrator

Re: Caminar als Onepager

Hat nichts mit Wordpress zu tun.
Im CSS ergänzen:

html
{
  scroll-padding-top: 60px; 
  scroll-behavior: smooth;
}

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

cyberdyne

Member

Re: Caminar als Onepager

Hallo,
vielen Dank für Deine Antwort. Der Hinweis auf Wordpress betraf das sanfte scrollen, da hat es eine App für Onepager. Habe es in der index vom Template Caminar  mit einem jquery Script probiert, wollte aber nicht klappen.

Viele Grüße,
Klaus

Last edited by florian (28.03.2024 11:13:08)

---

Macht's gut und danke für den Fisch!

florian

Administrator

Re: Caminar als Onepager

(Bitte keine Fullquotes bei direkten Antworten)

Die im Template-Stylesheet zu ergänzenden Zeilen adressieren beide Anforderungen, also sowohl das sanfte Scrollen, als auch dass die jeweiligen Ankerlinks nicht von der Navigation überdeckt werden.

Was ich jetzt nicht getestet habe ist, ob das evtl. auf mobilen Endgeräten unerwünschte Seiteneffekte hat; in diesem Falle ggfs. dann noch Media Queries ergänzen, also festlegen, dass die Anweisungen erst ab einer bestimmten Pixelbreite (@media screen and (min-width usw.) angewendet werden sollen.

scroll-padding-top kannte ich vorher auch noch nicht, man lernt doch nie aus.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

cyberdyne

Member

Re: Caminar als Onepager

(Bitte keine Fullquotes bei direkten Antworten)

Okay.

Also es funktioniert beides, allerdings lädt die Seite trotzdem jeweils frisch beim Sprung zum Anker/ Abschnitt, sprich es wird nicht einfach nach unten/oben gescrollt beim Click auf den Menulink.

---

Macht's gut und danke für den Fisch!

florian

Administrator

Re: Caminar als Onepager

Das einfachste ist da, die Navigation nicht mit show_menu2 zu erzeugen, sondern im Template fest zu verdrahten - denn SM2 erzeugt immer den kompletten Pfad, und dann wird die Seite neu geladen und es kommt in der Tat zum unsanften Scrollen.
Also so:

<input type="checkbox" id="tm"><?php //echo $mainnav; ?>
<ul class="main-menu cf">
    <li><a href="#eins">eins</a></li>
    <li><a href="#zwei">zwei</a></li>
    <li><a href="#drei">drei</a></li>
    <li><a href="#vier">vier</a></li>
    <li><a href="#fuenf">fuenf</a></li>
    </ul>

</nav></div></div>

In der Mobilansicht bleibt allerdings das Menü aufgeklappt und liegt überm Content, bis es manuell zugeklappt wird. Da müsste man sich noch was überlegen zu.
Ansonsten - kurzes Googeln ergab hinsichtlich des sanften Scrollens nach Pageload zB das hier:
https://codepen.io/bstrilziw/pen/kYmaJx
https://gist.github.com/iamravenous/f06 … 8b0839a7b0

faites vos jeux.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

cyberdyne

Member

Re: Caminar als Onepager

Danke für Deine Antwort. Ist dann vielleicht doch zu viel Provisorium und ich lass das mit dem Onepager. Vorher jedoch probier ich noch die Links aus.

---

Macht's gut und danke für den Fisch!

florian

Administrator

Re: Caminar als Onepager

Ich weiß jetzt nicht genau, was da Provisorium ist, aber zugegeben ist WBCE nicht unbedingt das optimale CMS für Onepager.
Da ist vielleicht eher Coast CMS ein Kandidat. Kommt auch darauf an, wie häufig zukünftig Änderungen an der Seite erfolgen werden.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.