GO TO TOP Button

[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....

[TerraProject]

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 ....

[fjuergens]

Da hast Du natürlich recht..........

[fjuergens]

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

Danke im voraus..

[TerraProject]

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

Code: [Auswählen]

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...

Code: [Auswählen]

<button onclick="topFunction()" id="myBtn" title="Go to top">go back to Top</button>
 

[fjuergens]

D A N K E......