Membuat Smooth Scroll Back to Top Blogger

Membuat Smooth Scroll Back to Top Blogger - Smooth Scroll Back to Top atau kembali ke atas, smooth artinya lembut yang dimaksudnya menggulung ke atas dengan lembut. Bagi anda yang mempunyai artikel yang panjang cara ini ampuh untuk digunakan.
scroll

Untuk anda yang belum mengerti bisa lihat DEMO dan silahkan discroll ke bawah nanti akan terlihat gambar anak panah ke atas pada bagian bawah kanan.

Untuk cara pemasangannya anda bisa lakukan penyimpanan kode dibawah pada Edit HTML

1. Jquery dan Javascript

Simpan kode berikut diatas kode </head>,pada script yang di garis bawah bila template anda sudah ada tidak perlu di pasang lagi.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>

2. CSS

Simpan kode berikut di atas kode ]]></b:skin> atau </style>
#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}

3. HTML

Masukan kode HTML di atas kode </body>
<div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-52ukycG06YM/UoY33B-a7MI/AAAAAAAAAAA/0svjHMlBQ8U/s1600/arrowTop.png'/></div>

Atau bisa lebih simple tinggal simpan kode berikut dengan cara tambahkan widget HTML/Javascript di tata letak,pada cara ini nomor 2 dan 3 abaikan saja.
<style type='text/css' scoped='scoped'>
#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-52ukycG06YM/UoY33B-a7MI/AAAAAAAAAAA/0svjHMlBQ8U/s1600/arrowTop.png'/></div>

Terakhir Simpan Template.

Sekian tentang Membuat Smooth Scroll Back to Top Blogger ini bisa bermanfaat.

73 Responses to Membuat Smooth Scroll Back to Top Blogger

  1. Replies
    1. keren sob, tapi punya saya udah ada walaupun gk sekeren ini :D

      Delete
    2. yang penting ada back to topnya mas ,hehe

      Delete
  2. Terima kasih tutornya..
    Hihihii tapi kalau melalui edit html aku nggak bisa

    ReplyDelete
    Replies
    1. kenapa gak bisa mbak :D makasih kembali yah

      Delete
  3. Sangat berguna buat artikel yang panjang, serta komentar yang panjang juga :D
    Banyak maksudnya hehe :)

    ReplyDelete
    Replies
    1. iya bener mas prisma :D sip deh pokonya,hehe

      Delete
    2. Kalau artikel panjang sih gpp, kalau banyak komentar jadi pusing. Hehe :D

      Delete
    3. iya yang menjalar seperti akar yah :D

      Delete
  4. yang lebih simple ada ga scripnya,,,,

    ReplyDelete
    Replies
    1. tanpa harus menggunakan javascript dan library jquery itu lebih simple :D pakai css dan html saja

      Delete
  5. waduh gan diblog punya ane udah ada nih...
    nyimak aja dah :D

    ReplyDelete
  6. Ya buat artikel yang panjang saja ya mas kalau artikelnya sedikit ya belum perlu pake ini...kalau gitu saya simpen dulu sebb artikel saya masih kurang banyak

    ReplyDelete
    Replies
    1. tidak juga kok,buat artikel sedikit juga bisa.. kan punya jenk indah artikelnya juga panjang :D

      Delete
  7. menarik dan layak dicoba, biar bisa kembali ke Home lagi

    ReplyDelete
  8. Bagusan yg simple tapi gak ada efek anggunk2 :D

    ReplyDelete
    Replies
    1. iya efek bounce :D kalau ada yg efek geleng-geleng mbak =D

      Delete
    2. Mungkin mbaknya belum tahu namanya gan |o|

      Delete
    3. biasa kalau mastah merendah,hehe saya juga belajar dari dya mas :)

      Delete
    4. Oh, maaf ya mbak :)
      Saya belum kenal, hehe

      Delete
    5. dimaafkan =D kenalan dulu dunk :p

      Delete
  9. saya juga sudah ada, tapi kurang smoot :D
    bisa dicoba triknya nih..trims sob...

    ReplyDelete
  10. Teknk yang keren Sob, ijin belajar bareng ya....

    Salam

    ReplyDelete
  11. ijin kopi kode dan mempraktekannya bos....

    ReplyDelete
  12. wah keren banget mas smoth scroll nya. jadi makin cantik blog nya ya

    ReplyDelete
    Replies
    1. iya seperti mbak ririn yah,hehe :D cantiknya

      Delete
  13. Artikel yang sangat berguna buat Blogger pemula seperti saya :-d

    ReplyDelete
  14. Mantab .. keren nih kayak nya, di praktekin dulu deh :D
    Ohh ya nih saya mau tanya dong tutor cara bikin Notifikasi kayak blog ini gmna yah ?
    Saya nyari" di google engga ketemu-ketemu =(

    ReplyDelete
    Replies
    1. silahkan kang felix :D gak bakal ada di google untuk tutorial notif seperti yang dipakai ini =D

      Delete
  15. biar memudahkan pengunjung ya mas, apalagi artikelnya panjang sangat diperlukan sekali back to top ini

    ReplyDelete
    Replies
    1. tepat sekali mas, apalagi ditambah komentar yang banyak yah :D makasih

      Delete
  16. Ijin utk nyobain yah mas...makasih sharing nya mas..

    ReplyDelete
    Replies
    1. silahkan dicoba, makasih kembali mas hand :)

      Delete
  17. perlu dicoba ni mas biar blog saya makin kece

    ReplyDelete
  18. saya udah bikin di blog saya :D

    www.irvanrobiansyah.com

    ReplyDelete
  19. Wow, this is really good sharing! Learnt another new trick!

    ReplyDelete
  20. Replies
    1. makasih kembali mbak :) jangan lupa disave yah,hihi

      Delete
  21. asyik juga ya mas kalau postingan ada semut nya. jadi tambah keren :D

    ReplyDelete
  22. This comment has been removed by a blog administrator.

    ReplyDelete
  23. keren mas
    harus ngutek HTML ini kalau nyobain pasang
    hehe

    ReplyDelete
  24. ternyata bisa di buat namual. kirain udah bawaan template. sip inponya...

    ReplyDelete
  25. Kalau seperti di blog ini yang ada scroll turunnya juga, bagimana cara bikinnya ?

    ReplyDelete
    Replies
    1. biar ada efek bounce yah, nanti di share :)

      Delete
  26. This comment has been removed by a blog administrator.

    ReplyDelete
  27. well this new work, copy and paste Om rata2 on how to make a Return to Laptops.
    Thanks Om. Greetings Know It http://www.beautywater.id/

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔