Membuat Smooth Scroll Pada Anchor Point
jQuery Smooth Scrolling to Anchor Point - Mungkin sobat pernah melihat beberapa web seperti Wikipedia, apabila di klik tautan maka akan meloncat kepada paragaph tertentu. Inilah yang akan saya jelaskan saat ini. Bedanya, apabila di wikipedia, tidak menggunakan smooth scrolling.
Sebelum menjelaskan cara pembuatannya, untuk lebih jelasnya silahkan kunjungi dulu halaman demo.
Untuk menerapkannya pada template, simpan kode ini di atas
Cara menggunakannya sobat hrus menulis pada postingan dengan mode HTML. Contoh link :
Untuk menentukan pargraf yang dituju, sobat harus menambahkan
Untuk mengatur ketinggian dari batas atas browser, misalkan sobat menggunakan floating menu, maka tambahkan jarak pada script sebelumnya (lihat ke atas). Untuk menambahkannya pada baris yang seperti ini:
Masih ada pertanyaan? silahkan diskusikan di kolom komentar.
Sebelum menjelaskan cara pembuatannya, untuk lebih jelasnya silahkan kunjungi dulu halaman demo.
Untuk menerapkannya pada template, simpan kode ini di atas
</body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
//]]>
</script>
Cara menggunakannya sobat hrus menulis pada postingan dengan mode HTML. Contoh link :
<a href="#services">Services</a>
Untuk menentukan pargraf yang dituju, sobat harus menambahkan
id
yang sesuai dengan link tadi, contoh :<div id="services">
.....
isi paragraf
.....
</div>
Untuk mengatur ketinggian dari batas atas browser, misalkan sobat menggunakan floating menu, maka tambahkan jarak pada script sebelumnya (lihat ke atas). Untuk menambahkannya pada baris yang seperti ini:
'scrollTop': $target.offset().top - 60
Masih ada pertanyaan? silahkan diskusikan di kolom komentar.
81 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
contoh: http://kodesaja.blogspot.com/2014/01/membuat-breadcrumb-terindex-oleh-google.html
http://kodesaja.blogspot.com/2014/01/membuat-breadcrumb-terindex-oleh-google.html#pertama
ini yang ane cari selama ini.. ane kirain kagak bisa diterapin di blog tapi ternyata bisa.
cocok untuk blog ane karena setiap artikelnya berisi beberapa bagian seperti screenshot,download link,dsb.
blogwalking yuk! http://lzmodern.blogspot.com :) :D
Terima kasih atas infonya Kang
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
$(window).bind("load", function () {
var urlHash = window.location.href.split("#")[1];
$('html,body').animate({
scrollTop: $('#' + urlHash).offset().top
}, 4000);
//]]>
</script>
Maksudnya anchor point akan diarahkan ke artikel lain, bukan di artikel yang sama
$(window).bind("load", function () {
var urlHash = window.location.href.split("#")[1];
$('html,body').animate({
scrollTop: $('#' + urlHash).offset().top
}, 4000);
malam gni gak bisa tidur, mending ke kangismet! ^_^
Daengrio.com <---- artikel terbaru!
[ saran nya dong kak, template baru nih ]
- salam damai! - daengrio
mantapweb.blogspot.com
emilseo.blogspot.com
artikel terbaru nih :)
Daengrio.com <---- artikel terbaru!
[ absen di malam hari :) ]
- Blogwalking yuk! -
- kali ini mantab! - :D
WOW! super sekali!
- Blogwalking yuk! -
Kesuwun artikelnya.
- artkel baru kang! - mohon di cicipi :p -
makasih udah share kang!
- Salam damai -
- salam damai kang ismet -
komentar sendiri ngak pa'pa kan di bales! :D
Terima kasih atas sharing nya.
artikel langkah lagi nih ^_^
- Blogwalking -
Kalo yang seperti google gimana kang. Seperti Spoiler, tp yang disemunyikanya sebuah paragraph
https://support.google.com/chrome/answer/95606?hl=id
atau coba ini :
⇒ [url=http://jsfiddle.net/kangismet/ksVXt/]http://jsfiddle.net/kangismet/ksVXt/[/url]
Keyyyeeennn :-bd :-bd :-bd jempolna sakampungeun kang :D