Internet
Now Reading
Προσθέστε ένα κουμπί “scroll to top” στο Blog σας, με jQuery
0

Προσθέστε ένα κουμπί “scroll to top” στο Blog σας, με jQuery

by Chris Karidis24 May, 2012

Αν θέλετε να προσθέσετε ένα κουμπί στο κάτω δεξί μέρος των δημοσιεύσεων σας, με το οποίο ο χρήστης θα μπορεί να μεταφερθεί στην αρχή της σελίδας, ο τρόπος είναι πολύ απλός.

Πηγένετε στην Πρότυπο > Επεξεργασία HTML

  • Κάντε αναζήτηση για τον κώδικα</body>
  • Και αμέσως πριν από αυτό, κάντε επικόλληση τον παρακάτω κώδικα



<style type=”text/css”>
#MD-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#99EEEEEE’,EndColorStr=’#99EEEEEE’);text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”></script>
<script type=’text/javascript’>
$(function() {
    $.fn.scrollToTop = function() {
    $(this).hide().removeAttr(“href”);
    if ($(window).scrollTop() != “0”) {
        $(this).fadeIn(“slow”)
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == “0”) {
        $(scrollDiv).fadeOut(“slow”)
        } else {
        $(scrollDiv).fadeIn(“slow”)
        }
    });
    $(this).click(function() {
        $(“html, body”).animate({
        scrollTop: 0
        }, “slow”)
    })
    }
});
$(function() {
    $(“#MD-StoTop”).scrollToTop();
});
</script>
<a href=’#’ id=’MD-StoTop’ style=’display:none;’>Scroll to Top </a>

Comments

comments

About The Author
Chris Karidis
Ονομάζομαι Χρήστος, και ασχολούμαι με την πληροφορική για πάνω από 10 χρόνια. Το TricksforGreeks.com το δημιούργησα για να βοηθήσω όσους αρχάριους χρήστες έχουν ανάγκη, σε θέματα σχετικά με την πληροφορική και την τεχνολογία. Μπορείτε να επικοινωνήσετε μαζί μου μέσω του live chat της σελίδας ή των κοινωνικών δικτύων που υπάρχουν στο επάνω μέρος αυτού του παραθύρου.