Tips Sederhana : Membuat Link Back To Top

in Web Desain | 52 Comments
Tips Sederhana : Membuat Link Back To Top

Back to topBack to top adalah sebuah link atau tombol yang di simpan di bagian footer sebuah blog yang ketika di klik akan kembali ke bagian atas/header. Beberapa waktu yang lalu saya sudah memberikan informasi mengenai plugin Scroll To Top, plugin ini sama dengan Back To Top namun scroll to top ini di berikan efek jQuery dan secara lembut akan kembali ke atas sebuah halaman blog ketika di klik link atau tombolnya.

Untuk tips kali ini link back to top tidak di berikan efek tersebut, sehingga ketika di klik akan langsung kembali ke atas.

Cara membuat Back To Top

Pertama anda buka file header.php, kemudian anda lihat selector apa yang digunakan setelah tag <body>. Lihat gambar di bawah.

<body>
<div id="wrapper">
<!-- begin header -->
<div id="header">

Contoh di atas adalah header.php dari template yang saya gunakan, anda lihat baris ke 2 yang, itu lah selector pertama atau pembungkus dari body blog yang letaknya tepat di bawah tag <body>. Rata-rata template biasanya menggunakan wrapper itu sebagai pembuka atau sebagai pembungkus.

Kemudian anda buka file footer.php, lalu anda copy kode di bawah dan letakan sesuai dengan keinginan anda.

<a href="#wrapper">Back to top</a>

Kode diatas merupakan perintah agar ketika link di klik akan kembali ke selector pertama tadi. Contohnya anda bisa lihat di bawah kanan blog saya.

Semoga tips sederhana ini bermanfaat.

Penulis: Satrya Bima - http://www.margasatrya.com

Satrya, founder margasatrya.com yang saat ini sedang bekerja di salah satu provider theme e-commerce, Tokokoo.com sebagai Front End Developer. Mau mengenal saya lebih jauh ? Silahkan follow twitter atau kontak saya

Berlangganan Artikel Gratis !

  • yusrond

    makasih infonya..
    kalo saya gak pake’ anchor #wrapper mas .
    saya pake’ anchor javascript:window.scrollTo(0,0) .
    kalo pake’ kayak punyaQ, ntar gak ninggalin jejak di address bar .
    hehe..

    • yusrond

      ohh iya, back to top milik anda pake’ script jquery apa nggak mas ?

      • http://www.margasatrya.com Satrya

        Terima kasih tips nya :)
        Kalo di template ini gak pake jQuery, soalnya udah kebanjiran jQuery di dalam templatenya :mrgreen: jadi standar aja deh :mrgreen:

        • http://www.margasatrya.com Satrya

          UPDATE : skr pkai Jquery lagi :lol:

  • ghe

    kalo di sisipkan gambar gimana kang?…..
    pake script pemanggil gambar kah dibagian footernya [yg img src]?

  • Masdin

    Ternyata sederhana yah… terkadang memang kalau sudah di bottom lagi malas kalau harus scroll lagi ke atas, bagusnya pake Back To Top aja, just 1 click :D

  • Pingback: Tweets that mention Tips Sederhana : Membuat Link Back To Top | Tutorial Wordpress Pemula | Tips Trik SEO | Tips Blogging -- Topsy.com

  • http://moblogger.co.cc Moblox

    thnx infonya bos. saya bukma:k bwt dipahami dulu sblm diamalkan ;-)

  • Aldy

    Sederhana memang mas cahya, tapi kalau menggunakan framework saya masih bingung. Makanya sampai sekarang masih belum buat :(

    • http://www.margasatrya.com Satrya

      Mas Aldy, “mas cahya” siapa y ? :mrgreen:
      Btw satrya lagi ngutak atik daleman hybrid juga nih :mrgreen:

      • http://www.isnuansa.com isnuansa

        Cahya adalah seorang dokter, blognya di catatan dot legawa dot com ;-)

    • http://www.isnuansa.com isnuansa

      Lhoh, kok manggilnya Cahya sih? Mas Aldy salah kali, ini bukan blognya dokter Cahya, tapi punya Satrya…

    • rismaka

      :lol: :lol:
      Kok bisa salah panggil ya heuheuheu…

      Maklum lah mas, Pak aldy itu udah sepuh, pekerjaannya banyak, jadi kurang konsentrasi :mrgreen:

  • http://rizky2009.blogspot.com Rizky2009

    trik ini untuk blogger / untuk wp sob, soalnya aq pengguna blogger

  • andre

    makasi mas, ijin bookmark. oya tanya dunk. rahasianya blog ini loadingnya cepet apa ya? maklum saya masi baru. blog saya termasuk lelet menurut saya. apa karena pengaruh thema/ widget/ plugin yang banyak atau karena apa mas?
    satu lagi mas (maaf banyak tanya) hhehe, di blog nya mas satrya kok image di load nya ‘unik’ ya? engga langsung di load semua. rahasianya apa mas hehehe

  • Gus Ikhwan

    Maaf, jarang mampir karena saya lagi sibuk bikin pertanyaan series wawancara buat om agus aka o-om
    sat, saran dikit kalau saya menulis di kotak komentar mata saya lelah karena warnanya sedkit contras dengan warna pitih dan terlalu kecil font sizenya..
    makasih sekali atas infonya sat, saya lagi mencoba otak atik theme dari copy blogger
    ini yang aku suka sat, karena kebanyakan jQuery bikin blog berat

    • http://www.margasatrya.com Satrya

      Iya gus nanti mau diedit2 lagi.. blm sempat nih

  • http://www.kampungmantra.co.cc wiz

    ayo promoin lagi kursus mandiri..hehehehe

    • http://www.margasatrya.com Satrya

      Hehhe, I.Allah mas.. lagi sibuk sama nge-blog :mrgreen:

  • http://blog.kamarkecil.com Arif R.

    kunjungan malam nih bro,,,

    artikel yang bagus, bisa nambah wawasan :D

  • vanmovic

    kalo plugin ada gak mas….:D

    • vanmovic

      jiah,,
      gambar di en.gravatar.com kok slalu gak nongol ya disini..? pdahal dah ane tambahin…

      • http://www.margasatrya.com Satrya

        Emailnya harus sesuai van dengan yg di pake di en.gravatar.com

    • http://www.margasatrya.com Satrya

      ada nih van

      <a href="http://www.margasatrya.com/plugin-ciptaan-anak-bangsa-scroll-top.html" target="_blank" rel="nofollow">http://www.margasatrya.com/plugin-ciptaan-anak-bangsa-scroll-top.html</a>
  • ismail

    Untuk sementara saya masih mempelajari kode2 blog saya mas, karena takutnya entar amburadul jadinya.

  • http://ddery.com dery

    trik lagi mas,, biar bisa melayang dibagian bawah kanan..
    edit css, lalu masukkan

    .nav-top {
    position:fixed;
    right:0px;
    bottom:0px;
    }

    trus code diatas ditulis begini

    <div class=”nav-top”><a href=”#wrapper”>Back to top</a></div>

    tapi biasanya saya menggunakan anchor name dibagian bawah body seperti ini

    <a name=”top”></a>

    trus bagian footer ditulis

    <div class=”nav-top”><a href=”#top”>Back to top</a></div>

    dengan masih menggunakan css diatas.. silahkan dicoba mas..

    • http://www.margasatrya.com Satrya

      Bagus nih der, thank trik css nya.. nanti sekalian di post disini :mrgreen:

  • http://resepmasakanindonesia.idcc.info/ anto

    sudah langsung tak coba, thanks

  • Id-Mac

    kebetulan udah ada di tempalte ane om

  • http://hmc.web.id Learn Indonesian

    Wah mantap mas… thank you very big :D :)

    • http://www.margasatrya.com Satrya

      sama2 :mrgreen:

  • Kampus Blog

    oww begitu mas caranya.. kemaren saya memakai plugin scroll to top tp tak lepas lagi hehe.. kebanyakan plugin…
    saya coba dulu mas.. trus seandainya gak ada wrappernya gmn?

    [OOT : ijin tukeran link mas.. link sudah saya pasang di blogrooll.. terima kasih..]

    • http://www.margasatrya.com Satrya

      udah dipasang di Sahabat mas :)

  • budiastawa

    Satryaaaaa. Tipsnya mantan surantap! Akan kuterapkan di blogku. Kebetulan blogku belum punya Back To Top button. Thanks yo…

    • http://www.margasatrya.com Satrya

      sama 2 bli my brother :mrgreen:

  • http://www.gemilang.tv Indovision

    Tipsnya memang ok, mau coba di terapkan. Thanks

  • dJumTKS Weblog

    wah boleh dicoba juga nih tips sederhananya sob :-)

    • http://www.margasatrya.com/ satrya

      Silahkan mas :mrgreen:

  • ardianzzzz

    Boros jika hanya befungsi untuk kembali ke atas. Brikut ini alternatifnya:

    $(‘.scrollPage’).click(function() {
    var elementClicked = $(this).attr(“href”);
    var destination = $(elementClicked).offset().top;
    $(“html:not(:animated),body:not(:animated)”).animate({ scrollTop: destination-20}, 500 );
    return false;
    });

    JSehingga untuk tiap anchor dengan class=”scrollPage” dapat menuju lokasi yang diinginkan.

    Misalnya header memiliki id=”header” maka contoh text anchornya:

    <a href="#header" class="scrollPage"…

    kita bisa mengarahkan kemana saja secara vertikal, Smooth scroll!

    :)

    • rismaka

      Ardianzzz,
      Perasaan borosan yang anda kasih deh mas :D
      BTW kode tsb ada yang hilang ya? Kok sepertinya kurang lengkap ya?

      • ardianzzzz

        Boros atau tidak tergantung pemakaian, hanya saja kode tersebut bukan plugin. Kita bisa mengaturnya sendiri mau di scroll sampai mana. Dan bisa digunakan di bayak anchor.

        Hilang? ah, itu kan fiungsi jQuery :p

        • http://www.margasatrya.com Satrya

          wohh, ada yang lagi debat disini :mrgreen:
          Btw thx tambahan scriptnya mas ardi. Belum di coba juga nih..

  • Andank

    Kalo yang pake efek kaya punya mas ni gimana buatnya??Atau memang bawaan temanya mas?

    • http://www.margasatrya.com Satrya

      Nanti deh sekalian saya post yah :D

      • Andank

        Oke mas saya tunggu

  • Pingback: Tutorial Cara Membuat Multi Scroll Page Dengan Jquery | Tutorial Tips Wordpress | Margasatrya.com

  • Sabun

    Selamat siang!

  • Skyu

    Terima kasih buat Tips-nya ya mas Satrya.. ^_^ salam kenal..