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....
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 ....
Da hast Du natürlich recht..........
Hallo Olaf,
könntest Du das bitte näher erklären wo das in der theme.php hin muss....????
Danke im voraus..
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:
D A N K E...... :thumbup: