Einbindung ScrollToBottom Knöppie

Gonzo Gates · Post by **Gonzo Gates** » Sat 15. Jul 2023, 20:18

Hallo Gemeinde,

ich weiß ja nicht, ob ihr es schon wusstet, aber mir ging tierisch auf den S*** ... auf die Nerven, dass wenn man in Tiny am Ende eines langen Dokumentes etwas geändert hat und dann in die Vorschau geht, dass man am Anfang der Seite landet. Das heißt, dass man elendig nach unten scrollen muß!

Es gibt ja einen ScrollToTop-Knöppie. Da habe ich mir gedacht, dass wenn es nach oben geht, man es es auch nach unten einrichten kann.

Die Zutaten:

Eine neue Grafik (ich habe aus dem ursprünglichen GIF ein PNG gamacht - scrolltotop.png), die aus der ursprünglichen Grafik '' um 180° gedreht wird (scrolltobottom.png). Ein bisschen Änderung in der 'CMSroot/templates/[Tmplname]/template.htm' und eine Priese CSS. Ferich is der Lack.

Im Folgenden sind die von mir verwendeten PHP, JS und CSS angegeben. Es muss natürlich an den Eigengebrauch angepasst werden. Meine Kommentare habe ich bewusst drinne gelassen und ich habe eine zentrale CSS-Datei.

In der 'CMSroot/templates/[Tmplname]/template.htm' wurde folgendes geändert

Code: Select all

<!-- scroll to top button - Zum Testen kurz div-Tag in scrollbutton-Tag umbenamst 
     Zusaetzlich noch einen ScrollToBottom-Button eingebaut - nicht schön, aber selten ;-) -->

<?php echo '<div id="dor_scrolltoTopButtonID"><a href="#top"><img src="' . $pth['folder']['templateimages'] . 'scrolltotop.png" class="dor_scrolltoTopButton" title="' . $tx['menu']['top'] . '" alt="nach oben"></a></div>'; ?>
<?php echo '<div id="dor_scrolltoBottomButtonID"><a href="#dor_footerLoginLink"><img src="' . $pth['folder']['templateimages'] . 'scrolltobottom.png" class="dor_scrolltoBottomButton" title="Nach unten" alt="nach unten"></a></div>'; ?>
<script>
//const ScrollButtonAusblenden = document.getElementsByTagName("scrollbutton"); DOR: Habe div-tag in scrollbutton -Tag umbenamst und Coding angepasst -> Macht nix - bringt nix
dor_scrolltoBottomButtonID.style.opacity = '0';
//dor_scrolltoBottomButtonID.style.right = '-45px';
dor_scrolltoBottomButtonID.style.transition = 'opacity 0.75s'; // DOR: die zeit. die der 'Nach unten'-Button ein- und ausgeblendet wird. 0.75 ist fuer den effekt perfekt
// DOR: hinzugefuegt, nix gebracht und nix kaputt gemacht. Sollte eigendlich aus dem Bildschirm nach rechts verschoben werden, damit das Element mit MouseOver nicht erreichbar ist.
//dor_scrolltoBottomButtonID.style.opacity = ((window.pageYOffset || document.documentElement.scrollTop) > 50) ? '0' : '1'; 
//dor_scrolltoBottomButtonID.style.right = ((window.pageYOffset || document.documentElement.scrollTop) > 50) ? '-45px' : '0'; // 
dor_scrolltoTopButtonID.style.opacity = '0';
dor_scrolltoTopButtonID.style.transition = 'opacity 1s';
//tplge_scrolltoTopButtonID.style.margin = '0 -45px 0 0';  DOR: Der 'Scroll-To-Button' soll standatdmaessig nach rechts geschoben werden -> klappt aber nicht!!! Weder mit 'margin' noch mit 'right'
//ScrollButtonAusblenden.style.right = '-45px'; Macht nix - bringt nix
window.onscroll = function() {
    dor_scrolltoBottomButtonID.style.opacity = ((window.pageYOffset || document.documentElement.scrollTop) > 5000) ? '0' : '1'; // DOR: hinzugefuegt und wird ausgeblendet, wenn wenn man auf dieder Site schon fast bis zum Ende gescrollt hat
    // dor_scrolltoBottomButton.style.right = ((window.pageYOffset || document.documentElement.scrollTop) < 7000) ? '-40px' : '0'; // DOR: hinzugefuegt, aber verschwindet nicht nach rechts, wenn '(window.pageYOffset || document.documentElement.scrollTop)' groesser oder kleiner ist als 7000. Hat aber auch nichts kaputt gemacht :-|
    // tplge_scrolltoTopButton.style.opacity = ((window.pageYOffset || document.documentElement.scrollTop) > 120) ? '1' : '0';
    dor_scrolltoTopButtonID.style.opacity = ((window.pageYOffset || document.documentElement.scrollTop) > 280) ? '1' : '0'; // DOR: Ab 150 wird der 'Scroll-To-Button' eingeblendet
    // tplge_scrolltoTopButtonID.style.margin = ((window.pageYOffset || document.documentElement.scrollTop) > 150) ? '0' : '0 -45px 0 0'; // DOR: Ab 150 soll der 'Scroll-To-Button' nach links geschoben werden -> klappt aber nicht!!! Weder mit 'margin' noch mit 'right'
    // ScrollButtonAusblenden.style.right = ((window.pageYOffset || document.documentElement.scrollTop) > 150) ? '0' : '-45px'; Macht nix - bringt nix
};
</script>

Wie in den Kommentaren ersichtlich ist, habe ich, da beide Knöppies, auch wenn sie nicht zu sehen sind (opacity:0), trotzdem noch vorhanden, aber ich habe es nicht geschafft, die Knöppies nach rechts zu schubsen, wenn sie ausgeblendet sind.

Kommen wir zu meiner zentralen Stylsheet-Datei. Dort ist folgendes eingetragen:

Code: Select all

/*#############################################

  Scroll to Top und Scroll to Bottom Buttons

##############################################*/

img.dor_scrolltoBottomButton { /* DOR: entnommen von CMSimple-Template; Namen und Farben geaendert, border aktiviert und Farbe geaendert -> nachdenken, ob Button-border wie bei 'ribbek' */
  background: rgba(153,153,153,1); 
  position: fixed; 
  top: 160px; /* DOR: Wert korrigiert, damit der Button den geeigneten Abstand zum oberen Seitenrand hat -> hier nicht mehr 'bottom:' */
  right: 0; 
  display: block; 
  border: 1px solid rgba(68,68,68,1); /* DOR: #444 - border eingeblendet */
  border-radius: 20px 0 0 20px;
}
img.dor_scrolltoBottomButton:hover {
  background: rgba(153 , 51, 0, 1); /* DOR: opacity an Seite angepasst */
}
img.dor_scrolltoTopButton { /* DOR: entnommen von CMSimple-Template; Namen und Farben geaendert, border aktiviert und Farbe geaendert -> nachdenken, ob Button-border wie bei 'ribbek' */
  background: rgba(153,153,153,1); 
  position: fixed; 
  bottom: 95px; /* DOR: Wert von 28 auf 95 korrigiert, damit der Button den gleichen Abstand wie Footer und Ticker zum unteren Seitenrand hat */
  right: 0; 
  display: block; 
  border: 1px solid rgba(68,68,68,1); /* DOR: #444 - border eingeblendet */
  border-radius: 20px 0 0 20px;
}
img.dor_scrolltoTopButton:hover {
  background: rgba(153 , 51, 0, 1); /* DOR: opacity an Seite angepasst */

@Gert: Schulle, dass ich deine Style-Selektoren nicht verwende, sondern meine, aber da habe ich dann einen besseren Überblick

Der Haken an der Chose ist, dass der Button für 'nach unten' einen Fixen Wert hat, bis er sich ausblendet. Das Zweite ist, dass sich der Button, wenn man eine Seite aufgerufen hat, erst einblendet, wenn man ein wenig auf der Seite nach unten scrollt.

Soweit ist die Lösung gans OhKäi und funzt in meiner Test-, Quali- und Prod-Umgebung.

Bei Schmerzen mit dem bisschen Code, gerne den Arzt besuchen.

Vielleicht könne man auch eine koole Funktion in 'CMsroot/cmsimple/userfuncs.php' machen. Ich denke mal drüber nach...

Gruß
Gonzo

CMSimple - Forum

Einbindung ScrollToBottom Knöppie

Einbindung ScrollToBottom Knöppie