Cara Membuat Jump Link Untuk Lompat Paragraf Pada Postingan Blog

Apa kamu pernah membuka sebuah postingan panjang pada sebuah web ataupun blog? Apa pernah kamu menemukan sebuah teks atau kalimat di dalamnya yang bila kamu klik maka page yang sedang kamu buka secara otomatis mengarah ke paragraf tertentu. Misalnya saat kamu berada di posisi paling bawah sebuah postingan, terdapat disana tautan "Kembali ke atas" yang jika kamu klik, maka secara otomatis page akan mengarah ke posisi paling atas tanpa kamu perlu melakukan scrolling pada mouse. Hal yang sangat membantu dan mempermudah para pembaca bukan?

Inilah yang biasa di sebut Jump Link. Sebuah tautan yang apa bila di-klik, akan mengarahkan kita ke posisi atau tempat tertentu. Jump Link sendiri bisa digunakan untuk 2 hal. Pertama, membuka website atau link tertentu yang kita masukan ke dalamnya. Kedua, mengarahkan pembaca ke sebuah paragraf tertentu di halaman yang sama tanpa menggunakan scroll.

- - - - - - - - - - - - - - - - - - - - - - - - - -

Di sini Akira akan menjelaskan fungsi kedua dari Jump Link, yaitu mengarahkan pembaca ke sebuah paragraf tertentu di halaman yang sama tanpa menggunakan scroll. Ada 2 element yang akan kita gunakan:

1. Target (posisi yang dituju)
Kita harus menandai dibagian mana pembaca akan diarahkan ketika sebuah tautan di-klik. Caranya yaitu dengan memasukan script di bawah ini ke posisi tertentu di sebuah postingan.

 <div id="target1"> Bagian Atas </div>

target1 di atas adalah sebuah nama atau id yang kita buat. Kamu bisa merubahnya ataupun membuat banyak nama-nama lain sebagai target di dalam sebuah postingan. Contoh: target1, target2, atau contact, Bab 2, dan lain sebagainya.
 

2. Link pemanggil
Adalah sebuah kata atau kalimat yang kita ubah menjadi sebuah link, yang nantinya akan mengarahkan pembaca ke posisi atau paragraf tertentu pada sebuah postingan yang sama. Cara membuat adalah dengan menambahkan script berikut pada sebuah kata atau kalimat. Kamu harus di dalam mode HTML untuk menambah atau merubah Script. Script-nya adalah sebagai berikut.

<a href="#target1"> Kembali ke atas</a>

 target1 adalah nama atau id yang akan kita panggil jika kita mengklik kalimat "Kembali ke atas". Jangan lupa, pada bagian ini kamu harus menambahkan # seperti di atas. Jika kamu mau memasukan id target1, maka kamu harus menambahkan # dibagian depannya. Menjadi #target1.

DEMO

Jika kamu masih bingung, Akira akan memberikan contoh. Di bawah ini adalah contoh sebuah isi postingan di dalam mode HTML:



<div id="target1">Bagian Atas</div><br />
<br />
Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas,  Bagian Atas.<br />
<br />
<br />
Bagian Tengah <br />
 <br />
Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah,  Bagian Tengah.<br />
 <br />
 <br />
Bagian Bawah<br />
 <br />
Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawa.<br />
 <br />
 <br />
<a href="#target1">Kembali ke Bagian Atas</a>



Mode Compose dari content di atas akan seperti ini:

Bagian Atas

Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas, Bagian Atas.


Bagian Tengah

Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah, Bagian Tengah.


Bagian Bawah

Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawah, Bagian Bawa.


Kembali ke Bagian Atas



 
Akan lebih mudah jika kamu langsung mempraktekannya, dari pada hanya membaca. Selamat mencoba! ;D

Perhatian! Template ini sudah menggunakan script yang berfungsi untuk memberikan efek scroll pada saat jump link aktif. Untuk memberikan efek scroll kamu bisa melihat tutorialnya di sini:
Cara Membuat Efek Smooth Scroll Untuk Jump Link Di Blog


author: Akira Asayami