Animasi Gulir ke Atas

Penulis : | Kamis, 29 November 2012 | Pukul 15:10:36 | Kategori : Script Gratis - Dibaca : 2119 kali

rangkasku

Tanggal 17 Oktober 2012 tutorial yang terakhir dimuat di rangkasku yaitu tentang Fit Image to Content (CMS Lokomedia) Sudah Lama lama juga rasanya, dan hari ini rangkasku mencoba memuat Tutorial tentang Animasi Gulir ke Atas atau dalam bahasa kerenya Animated Scroll to Top sebetulnya  banyak sekeli bertebaran di Internet tutorial tentang cara membuat Animasi gulir ke atas/ Animated Scroll to Top seperti yang terlihat di Web Rangkasku. Karena adanya permintaan rangkasku pada akhirnya rangkasku membuatnya,  Hal ini sebetulnya sangat sederhana dilakukan dengan jQuery (hanya beberapa baris kode). Kode akan memeriksa apakah posisi teratas scrollbar lebih besar dari nilai tertentu, kemudian memudar di gulir ke tombol atas. Setelah link diklik, maka halaman akan menggulung ke atas.

Desain & CSS

Deklarasikan elment # back-top dengan posisi: tetap sehingga tetap pada halaman. Tag span adalah opsional. Saya menambahkan tag span untuk menampilkan grafik panah. Saya juga menambahkan transisi: 1s (1s = 1 detik) untuk menciptakan efek memudar pada mouse.

 

 

Lihatlah langkahnya pada demo yang bisa Lokomoder download

 

 

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

Bagian jQuery  

Berikut ini adalah kode Javascript (Anda dapat tempel dimana saja pada halaman atau Template Lokomedia). Pada dasarnya, ia menyembunyikan elemen # back-top (itu adalah tag id="back-top">

 





No Javascript Fallback

Perhatikan kembali ke tombol atas yang menghubungkan ke jangkar # top yang merupakan ID dari tag

. Secara teknis Anda tidak perlu mengalihkan anchor link karena jQuery dapat menggulir halaman ke posisi apapun. Namun, itu bagus untuk memasukkannya karena memberikan fallback jika Javascript tidak didukung.

Catatan :

Cari dan ganti text hxxp menjadi http pada http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js, penulisan ini dimaksudkan agar tidak bentor dengan jQuery yang ada pada website ini.

Selamat Mencoba


   
Klik untuk Download [190 Kali]
 
 
 
7 Komentar pada : Animasi Gulir ke Atas
gravatar
Santo
03 Februari 2013 - 10:36:17 WIB
Mas boleh berbagi pengalamannya menggunakan syntaxhighlighter + tiny mce. Apa memang kalo sehabis posting trus di save, kemudian ingin diedit postingan itu, kode yang kita tulis "rusak" ya???
Kadang kode yang kita sisipkan pada syntaxhighlighter (pada bagian <pre></pre>) tidak nampak atau kadang hilang???
Mohon pencerahannya Replay
gravatar

Balasan Komentar dari Admin

Pada tanggal : 03 February 2013 - 17:10:41 WIB

Hal sama sering sy alami ketika menggunakan syntaxhighlighter + tiny mce, makannya sekarang sy pake ckeditor
gravatar
Santo
03 Februari 2013 - 19:12:01 WIB
Solusinya editor di ganti dengan ckeditor ya mas?? Agar tidak "rusak"? Replay
gravatar

Balasan Komentar dari Admin

Pada tanggal : 03 February 2013 - 19:36:33 WIB

Klo itu tergantung mas bro, sy sendiri sudah lama ganti coz selain syntaxhighlighter sering hilang banyak juga karakter yg tidak bisa di input via tinymce.
gravatar
Santo
03 Februari 2013 - 22:09:40 WIB
Terimakasih mas :-D
Kapan2 bisa di posting kelebihan dan kekurangan Tiny Mce dan Ckeditor hee Replay
gravatar
raey
28 Mei 2013 - 19:58:47 WIB
mas aku dah coba di blog aku, tapi ko tetep gak bisa yah..
apakah masih harus dimodifikasi Replay
gravatar

Balasan Komentar dari Admin

Pada tanggal : 28 May 2013 - 18:41:53 WIB

Bisa jadi jQuery nya bentrok mas. coba dicek kembali
gravatar
Teuku Maulana
14 Agustus 2013 - 09:50:20 WIB
kenapa tidak bisa ya saya pake script ini ? gak tampil gambar panahnya.. bisa butin tutorial'a mas..mas edit file'a di file apa aja.. mohon bantuannya.. Replay
gravatar

Balasan Komentar dari Admin

Pada tanggal : 14 August 2013 - 03:26:30 WIB

Untuk gambar ada dalam sampel dan bisa di donlot atau bisa buat sendiri.
gravatar
Teuku Maulana
14 Agustus 2013 - 12:16:11 WIB
itu isi file donlodnya di upload ke folder mana ya mas? Replay
gravatar

Balasan Komentar dari Admin

Pada tanggal : 14 August 2013 - 07:08:06 WIB

untuk gambar bisa di letakan di folder template dan sesuaikan link nya. untuk cssnya bisa copas ke file css yg ada.
gravatar
Teuku Maulana
15 Agustus 2013 - 09:29:56 WIB
mas, waktu saya masukkan javascript nya malah menu link dropdown nya pada web gak bisa dipake?

ada solusi mas? Replay

Tulis Komentar Dengan Bijak Sesuai dengan ToS

Nama
Email
Website
Komentar
 
Incorrect please try again
Masukan kata di atas: Masukan nomor yang kamu dengar:
 
Statistik

rangkasku hari ini : 87
rangkaskuTotal : 58430

rangkaskuHits hari ini : 422
rangkaskuTotal Hits : 273864

rangkaskuOnline: 2
Berlangganan Artikel close