Page-Navigation ohne Scrolling

[mapfei]

Hi,

ich möchte, dass die Page-Navigation nicht zum jeweiligen Anker scrollt, sondern direkt dorthin springt. Wie muss hierfür das entsprechende Script angepasst werden?

Grüße,
mapfei

[Tim]

Vergebe jedem Link die Klasse "backlink". Das sollte das Scroll-Script umgehen.

[mapfei]

Habe jetzt jedem Link in der Page-Navigation diese Klasse vergeben. Nun gelange ich immer zurück zur Startseite.

[Tim]

Ok. Versuch mal Klasse: "not-anchor" oder "external-anchor".

Falls das nicht klappt:
Musst du den Link dann sicher noch entsprechend anpassen ala {{env::request}}#anker.

Alternativ musst du in der scripts.js dem Scroll-Script das Delay rausnehmen.

[mapfei]

Die beiden anderen Klassen bringen ebenfalls nicht den gewünschten Effekt.

Wenn ich {{env::url}} voran stelle, dann sieht der Link so aus: #http://dev.domain.comanker

Das wäre dann die Stelle?

jQuery("html, body").animate({scrollTop: target.offset().top - stickheaderHeight}, 500);

Ich möchte halt vermeiden, dass wenn z.B. der letzte Punkt der Page-Navigation ausgewählt wird, ein "flackern" ausgelöst wird, da die Seite recht lange scrollt.

[Tim]

Es wäre {{env::request}}

scripts.js, Zeile 496. Variable: var duration = 300;

Du kannst auch in der customize.js ein eigenes Script drüberlegen. Das wäre update-sicher.

[mapfei]

Prima, danke!
Noch was anderes, was indirekt damit zu tun hat?

Auf der Startseite verlinke ich ebenfalls auf Anker dieser Unterseite, welche die Page-Navigation enthält. Das funktioniert soweit auch super. Allerdings in der mobilen Ansicht nicht. Hier "treffen" die Anker nicht genau. Woran könnte das liegen?

[Tim]

Allerdings in der mobilen Ansicht nicht. Hier "treffen" die Anker nicht genau. Woran könnte das liegen?

Vielleicht optisch wegen des Stickyheaders?

[mapfei]

Ne. Sind eigentlich Fullscreen-Bereiche mit Bildmotiv... Lässt sich das irgendwie verzögern? Also dass der Anker erst nach vollständigem Laden der Seite aufgerufen wird?

[Tim]

Ne. Sind eigentlich Fullscreen-Bereiche mit Bildmotiv... Lässt sich das irgendwie verzögern? Also dass der Anker erst nach vollständigem Laden der Seite aufgerufen wird?

Mhh... imgrunde macht das Standard-Script ja genau das. Entferne doch einfach die Dauer. Wenn du ein eigenes Script nutzt kannst du bei Klick erst noch ein Timeout setzen und darin bzw. danach erst den Sprung zum Anker machen.

[mapfei]

Hm, funktioniert das denn auch, wenn ich von /SeiteA zu /SeiteB#Anker wechsle?

[Tim]

Hm, funktioniert das denn auch, wenn ich von /SeiteA zu /SeiteB#Anker wechsle?

Ich denke nicht. Das muss du wiederum anders abfangen, falls überhaupt möglich. Da musst du direkt die url per JS auslesen.

Ich habe das Template mal bissel geändert. Es wird geprüft, ob der Link bereits ein Hash-Zeichen beinhaltet, oder nicht. Falls ja, wird der Link 1zu1 eingesetzt. Damit kann man beliebige Urls inkl. Anker vergeben ala {{link_url::123}}#meinAnker

<nav class="mod_navigation page_navigation onepagenav block">
<ul class="vlist level_1">
<?php foreach($this->group('menu_item') as $i => $fields): ?>
<li class="mlist">
<a href="<?php if(\strpos($this->field('anchor#'.$i)->value(),'#') === false): ?>#<?php endif; ?><?= $this->field('anchor#'.$i)->value(); ?>" class="a-level_1 <?php if($this->field('cssclass#'.$i)->value()): ?> <?php echo $this->field('cssclass#'.$i)->value(); ?><?php endif; ?>">
<div class="title"><?php echo $this->field('title#'.$i)->value(); ?></div>
<div class="glow"></div>
<div class="circle"></div>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>

[mapfei]

Oh, super! Allerdings bezog sich das auf mein weiteres Problem.

[Tim]

Oh, super! Allerdings bezog sich das auf mein weiteres Problem.

Ja, und ich denke das wird bei Seiten-Wechsel nicht klappen. Und wie gesagt, eigentlich macht das aktuelle Script ja bereits alles nötige. Du kannst die Duration einfach auf 0 stellen.