Softscroll für "Nach oben" Link

[Groundhog]

Hallo zusammen,

Derzeit arbeite ich am Template und plane das "Endless Scrolling" Plugin einzusetzen. Somit wären die Seitenzahlen passe und die Navi ein wenig komfortabler.

Soweit so gut. Ist man am Ende der Seite angelangt kann man den "Nach Oben" Link benutzen um nach oben zu "springen". Diesen Link der ja in der inc_seite.tpl steht habe ich in den Footer in ein fixes div am Seitenende eingebunden. Funktioniert alles wunderbar.

Was mich nun aber stört ist das "springen". Mir wäre ein Softscroll, also ein weiches nach oben scrollen wesentlich lieber, und schöner wäre es auch.

Irgendwie kapier ichs grad nciht, bin auch in Javascript nicht fit, was wahrscheinlich der Grund für mein Unwissen ist 😀

Kann mir hier bitte jemand weiterhelfen?

 

[martinwolf]

AW: Softscroll für "Nach oben" Link

HTML Beispiel:

<a id="topAnker">Zurück nach oben</a>

JS:

$('#topAnker').click(function(){           
          $('html,body').animate({scrollTop: 0},[B]300[/B]); 
          return false; 
});

Die 300 gibt dabei die Geschwindigkeit des Scrollens nach oben an.

 

[Groundhog]

AW: Softscroll für "Nach oben" Link

Hey Danke Martin,

Wenn du mir jetzt noch sagst wo ich den JS Code reinpacken muss damit das läuft wär ich dir sehr dankbar. Mir ist zwar bekannt dass man JS direkt in die HTML Datei schreiben kann, aber damit funzt das nicht. Muss der Code in eine der JS Dateien die schon im Template Ordner liegen?

 

[martinwolf]

AW: Softscroll für "Nach oben" Link

Hey Danke Martin,

Wenn du mir jetzt noch sagst wo ich den JS Code reinpacken muss damit das läuft wär ich dir sehr dankbar. Mir ist zwar bekannt dass man JS direkt in die HTML Datei schreiben kann, aber damit funzt das nicht. Muss der Code in eine der JS Dateien die schon im Template Ordner liegen?

Erstell dir am betsen eine neue functions.js im js Verzeichnis deines Templates und pack dort den Code rein:

$(function() {
    $('#topAnker').click(function(){           
          $('html,body').animate({scrollTop: 0},300); 
          return false; 
    });
});

Diese hängst du dann entweder in die template.xml mit rein:

<File Path="js/functions.js" />

oder in die header_custom.tpl

<script src="{$currentTemplateDir}js/functions.js" type="text/javascript"></script>

 

[Groundhog]

AW: Softscroll für "Nach oben" Link

Hey Martin,

Vielen Lieben Dank, das hat ja sensationell geil geklappt 😀