Einen "Nach oben" Button einfügen


Wenn man lange Post's liest, gibt es viel zum scrollen damit man wieder
oben angelangt. Eine angenehme Möglichkeit ist ein
"Nach oben" Button, mit dem sich das hoch-scrollen erledigt.
(Gefunden bei  > BloggerLatein)


Beispiel:





Anleitung:


In die Übersicht, zu Layout / Gadget hinzufügen - das HTML/JavaScript Gadget auswählen
und in den Footer integrieren.
Nun folgendes Script kopieren und im Gadget bei Content einfügen.



Script
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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
            }, 800);
            return false;
        });
    });
});
</script>
<style>
#back-top {
position: fixed;
bottom: 10px;
margin-left: 35%;
}
#back-top span {
width: 40px;
height: 40px;
display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPQYzovadphJtcAyjNa_iT8wxVpwjwB5ZbJwpJIK5gFFbZ4JQgvFEllU-HTiCDfiHF9KIWb1Rl-AB2DBSkvP0ka6ZMK8nHRhiOXcVZfVPm80ppb4LkEL9QKrCkVJAqPq23r2OEWvuFwikJ/s1600/bt.png)
}
</style>
<div id="back-top" style="display: block;" >
<a href="#top"><span></span></a>
</div> 


"Auf Blog anwenden" klicken, nicht vergessen.







Keine Kommentare:

Kommentar veröffentlichen

Abonnieren Posts (Atom)