Hallo zusammen,
habe auf meiner Tippspielseite mal einen Scrollbutton eingebaut, mit dessen Hilfe man schnell wieder nach oben scrollen kann.
Macht sich besonders bei der Tippübersicht oder der Mitgliederliste gut, wenn man, so wie ich, 60 Tipper auf einer Seite anzeigen lässt.
Folgende Erweiterungen sind nötig:
in die base.css (am besten ganz oben) einfügen:
PHP
- /*** Scroll Button ***/#back-top { position: fixed; top: 30px; right: 20px; z-index: 3; display: none;} #back-top a { width: 40px; height: 40px; display: block; text-align: center; font-size: 25px; color: #fff; background-color: #ff0000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; transition: background-color .15s; -moz-transition: background-color .15s; -webkit-transition: background-color .15s; -o-transition: background-color .15s; -ms-transition: background-color .15s;} #back-top a:hover { text-decoration: none; background-color: #0000ff;}}/*** Ende Scroll Button ***/
in die index.php gleich hinter den meta-Einträgen (bei mir ab Zeile 119) einfügen:
PHP
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script><script>$(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });});</script>
und ebenfalls in die index.php direkt nach "<body onload="UhrzeitAnzeigen();">" (ca. Zeile 350) einfügen:
Das war's schon... (siehe Bild)
Der Scrollbutton erscheint erst, wenn man 100px nach unten scrollt.
Gruß
P@ulchen
