GO TO TOP Button

Begonnen von fjuergens, 17 März 2018, 10:06:35

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 1 Gast betrachten dieses Thema.

fjuergens

Nachdem mich einige angeschrieben habe wie ich den GO TO TOP Button
eingebaut habe, hier die Anleitung.....

Wers gebrauchen kann... viel Spass damit.....

---------------------------------------------------------------
Nimm die header.php und füge nach den Mega-Tags, also nach:
<meta name="generator" content="pragmaMx 2.4.2 - by http://pragmamx.org" />
<meta name="copyright" content="2018 by Athen-Magazin News" />
<meta name="description" content="Veranstaltungen in Athen und andere Informationen aus Athen und Umgebung" />
usw.

folgendes ein:



<style>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #cc6600;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}
</style>

dann gehe ins System > Einstellungen > Fuß-Nachrichten
und in eine der 4 Zeilen oder auch hinter was anderes folgendes einfügen:
(Du kannst es auch in die footer.php vor </BODY> einfügen

<button onclick="topFunction()" id="myBtn" title="Go to top">go back to Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

den Titel und die Farbe kannst Du in dem Bereich der in den Header kommt ändern....

mit netten Grüßen aus Athen / GR
F.Juergens

Olaf

Danke
Besser aufgehoben is der Code aber direkt im theme in der theme.php eingebunden über pmxHeader::add_style_code und add_script_code

Bei Updates vom pmx wäre das dann ansonsten wech ....
g

Olaf

Kein Support über PN, Mail etc.!
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!

fjuergens

Da hast Du natürlich recht..........
mit netten Grüßen aus Athen / GR
F.Juergens

fjuergens

Hallo Olaf,
könntest Du das bitte näher erklären wo das in der theme.php hin muss....????

Danke im voraus..
mit netten Grüßen aus Athen / GR
F.Juergens

Olaf

in meinen Themes, d.h. alle, die mit tp_ angangen ist der Aufbau immer gleich....

Voraussetzung ist ein pmx ab V 2.4.x

in der themes.php des Themes am Ende der Datei folgendes einfügen
pmxHeader::add_style_code("#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #cc6600;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}");
pmxHeader::add_style_code("#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #cc6600;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}");

pmxHeader::add_body_script_code('

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}');


in der Theme.html am Ende vor dem </body>-Tag folgendes einfügen...
<button onclick="topFunction()" id="myBtn" title="Go to top">go back to Top</button>

:drinks:
g

Olaf

Kein Support über PN, Mail etc.!
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!

fjuergens

mit netten Grüßen aus Athen / GR
F.Juergens