Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Schön zum Seitenanfang scrollen mit jQuery (smooth scroll to pagetop)
Hier sind ein paar Zeilen Javascript, CSS und HTML um einen schönen "Zurück-zum-Seitenanfang Button" zu erstellen. Der Code wird auch auf dieser Seite verwendet. (Siehe rechte Seite beim Scrollen)
Das ist der Link, den ihr am Besten vor das schließende <script type='text/javascript'>
/* <![CDATA[ */
var photocrati_ajax = {"url":"http://andreknieriem.de/photocrati_ajax","wp_site_url":"http://andreknieriem.de","wp_site_static_url":"http://andreknieriem.de"};
/* ]]> */
</script>
<script type='text/javascript'>
/* <![CDATA[ */
var userSettings = {"url":"/","uid":"1","time":"1386227703"};var commonL10n = {"warnDelete":"Du bist dabei, die ausgewu00e4hlten Punkte endu00fcltig zu lu00f6schen. Dru00fccke 'Abbrechen' zum Stoppen, 'OK' zum Lu00f6schen."};/* ]]> */
</script>
<script type='text/javascript' src='http://andreknieriem.de/wp-admin/load-scripts.php?c=0&load%5B%5D=jquery-core,jquery-migrate,hoverIntent,utils,common,admin-bar&ver=3.7.1'></script>
<script type='text/javascript' src='http://andreknieriem.de/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/ajax.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://andreknieriem.de/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/frame_communication/static/frame_event_publisher.js?ver=3.7.1'></script>
</body> Tag packt.
<a href="#" class="scrollup">Scroll</a>
Mit diesem CSS macht ihr den Button schön und positioniert ihn. (Das Bild muss natürlich auch eingebunden werden.)
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('icon_top.png') no-repeat;
}
Und hier den jQuery Code um den Button ein und auszublenden und die Scroll Animation zu starten:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
Viel Spaß damit!
Kommentare
1. In die html-Seite eingefügt:
Also folgendes:
das Javascript oben geht auf die Klasse scrollup. Also muss dein Link die Klasse scrollup haben. Dann muss auch noch dein CSS angepasst werden, du hast eine ID erstellt, es muss eine Klasse sein. Also .scrollup.
Grüße
Was hab ich denn da jetzt falsch gemacht...
1. In die html-Seite eingefügt:
2. scrollup.js erstellt mit Inhalt:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
3. style.css mit Folgendem ergänzt:
#scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url(../images/icons/icon_top.png) no-repeat;
}
4. Das Bild icon_top.png existiert im angegebenen Verzeichnis!
Hinterlasse einen Kommentar