Rabu, 30 Mei 2012

Back to Top - Smooth Scrolling and fade Out

1. Pergi ke Dashboard >> Design >> Page Element >> Add a Gadget >> HTML/Javascript
  (ATAU Dashboard >> Layout)
2. Copy(Ctrl+C) dan paste(Ctrl+V) code dibawah pada ruang HTML/Javascript



<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: 30px;
margin-left: -170px;
}
#back-top a {
width: 45px;
display: block;
text-align: center;
font: 8px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #666;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover {color: #000;}
/* arrow icon undefinedspan tag) */
#back-top span {
width: 45px;
height: 45px;
display: block;
margin-bottom: 7px;
background: #777 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Qjf8-jaSs013Vt_eIf7A1a07mliuDiagoGbDvROo7LP4fQ7IrrTZPjmEOA1Ic7MC2uct_cojTtM43klOkQvrJFGuG4-Ahd2MouKq3ODeQJGVc-hTVzREIKiES_QjoRzmqTiyWaS9mzBx/s1600/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
#back-top a:hover span {   background-color: #000;}
</style>
 <div id="back-top" style="display: block; ">
<a href="#top"><span></span><font><font>Top</font></font></a>
</div>

3. Save dan lihat hasilnya.......

0 komentar:

Posting Komentar