Smooth Scroll zum Content

 

Mir ist aufgefallen das einige Zeta-Nutzer zuerst mit diesem Layout arbeiten aber später dann doch zu einem anderen Layout wechseln.

Das liegt wahrscheinlich daran das man nicht sofort erkennen kann das sich unter dem formatfüllendem Header der eigentliche Content befindet.

Hier eine Möglichkeit dies mit Hilfe des Smooth Scroll Scripts abzuändern.

so setzt ihr das um

  • Zuerst baut ihr eure Seite ganz normal auf.
  • Dann fügt ihr folgendes CSS per Einstellungen > CSS hinzu.

<style>

.caption-text a {

display: inline-block;

color: rgba(0,0,0,0.7);

text-shadow:

0 4px 4px rgba(255,255,255,0.6),

0 15px 6px rgba(0,0,0,0.7);

font-size: 42px;

transform: scaleX(3.5);

text-decoration: none;

transition: all 0.3s ease-in-out;

}

.caption-text a:hover {

color: rgba(0,0,0,0.7);

text-shadow:

0 4px 4px rgba(255,255,255,0.6),

0 24px 4px rgba(0,0,0,0.7);

}

</style>


  • Jetzt fügt ihr am Ende der Seite folgendes Script per Widget > Quelltext ein.

<script type="text/javascript">

jQuery(document).ready(function($) {

$(".scroll").click(function(event) {

event.preventDefault();

$('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);

} );

} );

</script>


  • Nun geht Ihr zum Header, Rechtsklick in das Textfeld "Erweitert > HTML-Quelltext"
  • Hier fügt unter dem Text unten stehenden Code ein.

<a class="scroll" href="#">▼</a>

  • Anschließend klickt ihr auf den Icon über den Quelltext "HTML-Quelltext ausblenden"
  • Jetzt markiert ihr das kleine Dreieck unten und verlinkt es mit dem ersten Artikel der Seite.