Cara buat Scroll To Top yang lebih menarik

Assalamualaikum dan salam sejahtera semua..

Yaaww, apa khabar semua? Masih lagi bersama blog Pengembara Awan? Haa, hari nie nak share sikit macam mana buat Scroll To Top animasi dengan kod CSS dan jQuery... Erkk? Tak tahu ke macam mana benda nie, korang tengok jerp dekat blog aku nie.. Cuba korang scroll ke bawah scrollbar nie, then mesti akan muncul perkataan ' Kembali Ke Atas '..

Okay, tanpa membuang masa, jom kita teruskan kepada apa yang nak dibuat sekarang nie ya... Ehhh!!! Kejapp!! Lupa nak cakap, backup template dulu ya... Takut-takut tak menjadi...

1. Login akaun Blogger korang. INGAT! Pastikan Email dan Password yang betul..

2. Pergi ke Template > Edit HTML > Proceed

3. Cari kod </head> di dalam template korang tuh..

Kalau dah jumpa, salin script kat bawah nie dan tampal ia betul-betul di ATAS kod </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/>

<script>
$(document).ready(function(){

// hide #back-top first
$(&quot;#back-top&quot;).hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 100) {
$(&#39;#back-top&#39;).fadeIn();
} else {
$(&#39;#back-top&#39;).fadeOut();
}
});

// scroll body to 0px on click
$(&#39;#back-top a&#39;).click(function () {
$(&#39;body,html&#39;).animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>


4. Dah tampal/paste kod tadi? Haa, sekarang untuk kod CSS nya pulak... Korang cari kod ]]></b:skin>.

Dah jumpa? Okay, sekarang salin kod kat bawah nie dan tampal ia betul-betul di ATAS kod ]]></b:skin> tuh tadi kay..


#back-top {
    position: fixed;
    bottom: 15px;
    right: 15px;
    cursor: pointer;
    border:1px solid #DE0025;
    padding: 6px 10px;
    border-radius: 3px 3px 3px 3px;
    font-size: 1.2em;
    font-weight: bold;
    background: none repeat scroll 0% 0% #FFFFFF;
    color: #000000 ! important;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000000;
}
* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
}
#back-top a:hover span {
background-color: #000000;
}


Info kod CSS diatas:

1. Kod berwarna MERAH: Warna untuk border
2. Kod berwarna BIRU: Warna background
3. Kod berwarna UNGU: Warna untuk perkataan

Haa, ini lah tutorial aku hari ini... Harap ia bermanfaat dan korang suka ya.. Selamat Mencuba!!

Sekian...
9:07 PM

0 orang pengomen yang tercomel ! :

Post a Comment

Cancel Reply

Blog Pengembara Awan

Welcome to my paradise. I hope you all supported my blog and enjoy with my posted!

Followers

Ping Widget

Page Rank
DMCA.com
Kartikel Ping

Alexa Widget

Contact Form

Popular Posts

statistics