Cara Membuat Anchor Link Satu Halaman Dengan Efek Smooth

Cara Membuat Anchor Link Satu Halaman Dengan Efek Smooth

Cara Membuat Anchor Link Satu Halaman Efek Smooth. Anchor link merupakan salah satu link type navigasi dalam sebuah website yang penggunaannya sangat dibutuhkan oleh para webdesigner. Link type ini juga sering kali digunakan untuk mengoptimalisasi SEO sebuah web atau blog dengan menghubungkan antar artikel, yang apabila link tujuan itu terdapat dalam satu blog/web biasa kita sebut dengan internal link, sedangkan link dengan tujuan ke blog/web lain disebut dengan external link.

Silakan pelajari : Tahap belajar SEO yang benar

Dalam penggunaannya pun bermacam-macam, seperti yang kita lihat pada web wikipedia, mereka menggunakan link tautan untuk menghubungkan kata satu dengan kata lain pada artikel lain yang saling berkaitan atau berhubungan. Kita pun juga bisa memakai anchor link ini untuk membuat table of content atau daftar isi dalam satu artikel atau satu halaman.

Untuk tehnik penggunaan juga bisa dengan berbagai tehnik dan efek, ataupun tanpa efek. Kebanyakan website akan menggunakan javascript untuk menimbulkan efek halus pada anchor link tersebut.

Nah, kali ini saya akan mencoba mengsharekan cara membuat anchor link dalam satu halaman dengan efek halus. Dan tentu saja untuk menunjang efek ini dibutuhkan javasript.

DEMO

Cara Membuat Anchor Link Satu Halaman Dengan Efek Smooth

Untuk membuatnya silakan ikuti tutorial dibawah ini
Dibawah ini adalah contoh sederhana untuk membuat daftar isi sebuah artikel dalam satu halaman seperti wikipedia, namun dengan efek yang halus.

1. Buatlah susunan HTML seperti dibawah ini.

<ul>

<li><a href="#paragraf-satu">Paragraf 1</a></li>

<li><a href="#paragraf-dua">Paragraf 2</a></li>

</ul>



<div id="paragraf-satu">Paragraf 1</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum condimentum elit eget ullamcorper. Nunc eget orci at dui rutrum viverra sit amet a erat. Fusce rutrum placerat lacus, ac vestibulum mauris luctus ut. Ut feugiat nibh risus, nec volutpat purus euismod ut. Vivamus eget mollis sapien. Aliquam blandit vulputate sem, eu tempor nunc elementum a. Praesent eget tempor nulla. In sit amet sem metus. Integer sed mattis est. Cras sed lobortis odio, non mollis ante. Cras tempor velit lectus. Quisque vestibulum ante nec metus egestas, non suscipit massa ornare. Ut augue tellus, tincidunt id nisi sit amet, pharetra accumsan ante. Quisque lorem justo, eleifend mattis semper vitae, commodo vel est. Vestibulum tristique, velit non sagittis consectetur, orci nibh mattis est, et ultricies sem orci auctor augue.</p>



<div id="paragraf-dua">Paragraf 2</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum condimentum elit eget ullamcorper. Nunc eget orci at dui rutrum viverra sit amet a erat. Fusce rutrum placerat lacus, ac vestibulum mauris luctus ut. Ut feugiat nibh risus, nec volutpat purus euismod ut. Vivamus eget mollis sapien. Aliquam blandit vulputate sem, eu tempor nunc elementum a. Praesent eget tempor nulla. In sit amet sem metus. Integer sed mattis est. Cras sed lobortis odio, non mollis ante. Cras tempor velit lectus. Quisque vestibulum ante nec metus egestas, non suscipit massa ornare. Ut augue tellus, tincidunt id nisi sit amet, pharetra accumsan ante. Quisque lorem justo, eleifend mattis semper vitae, commodo vel est. Vestibulum tristique, velit non sagittis consectetur, orci nibh mattis est, et ultricies sem orci auctor augue.</p>

2. Kemudian masukkan javascript berikut di atas </head> atau dibawah artikel anda, tetapi ingat, pada saat memasangnya aktifkan jendela post mode HTML disamping tombol Compose pada edit artikel.

<script type='text/javascript'>

/*<![CDATA[*/

//Scroll Anchor Point

$(document).ready(function(){$('a[href^="#"]').on("click",function(o){o.preventDefault();var n=this.hash,t=$(n);$("html, body").stop().animate({scrollTop:t.offset().top},900,"swing",function(){window.location.hash=n})})});

/*]]>*/

</script>

3. Simpan artikel anda jika sudah selesai.

Cukup mudah bukan?

Demikian tutorial cara membuat anchor link satu halaman dengan efek smooth, semoga bermanfaat.

Baca Juga :
Membagi postingan menjadi 2 halaman di blogspot
Membuat tab view dengan CSS3 di artikel blogspot

Terimakasih telah membaca postingan Agung Jaka Nugraha.
Wassalam

Cara Membuat Anchor Link Satu Halaman Dengan Efek Smooth