smooth scrolling
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 </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.

82 komentar

widih keren euy, jadi lebih gampil. :-d

Balas

hahaha, keren euy komentar pertamaxnya. :D

Balas

Hehehehe resep jadi tiasa luluncatan :D atas bawah top down 1 2 3 4 loncaaatttt....heheheh :D
Keyyyeeennn :-bd :-bd :-bd jempolna sakampungeun kang :D

Balas

mangga nyandak kompan ka POM :D :D

Balas

loloncatan aka gogolosoran wkwkkwwk.. beuh eta jempol meuni balatak :D

Balas

TOPBGT kang... :)
Kalo yang seperti google gimana kang. Seperti Spoiler, tp yang disemunyikanya sebuah paragraph
https://support.google.com/chrome/answer/95606?hl=id

Balas

waduh di kalah lagi ngak jadi pertamax :/
Thanks udah share kang ismet, sangat bermanfaat!
:D
- Blogwalking -

Balas

makasih kang infonya sangat membantu ^_^
artikel langkah lagi nih ^_^
- Blogwalking -

Balas

jempol panangan sakalian jempol peana kang :D..hatur huhun kang nanti kalo mau bikin ginian tinggal mampir dimari lagi

Balas

wah demonya keren Bang :) makasih buat tipsnya....salam Blogger SUPERRRRRR>>>>> :)

Balas

aya nu hade, scroll full screen! erek? tong ah bising kabitai ;))

Balas

ada2 aja tutorialnya.. :)

Balas

Syuper sekali...!! haha,, Kayaknya ini lebih cocok buat laman faq (forum tanya jawab) deh.. :s

Balas
Komentar ini telah dihapus oleh pengarang.

wkwkwkw... sami2 kang mur

Balas

itu pake toggle.. coba search aja di gugel
atau coba ini :

⇒ [url=http://jsfiddle.net/kangismet/ksVXt/]http://jsfiddle.net/kangismet/ksVXt/[/url]

Balas

beuuuuh.... blogwalking terus :-d

Balas

wkwkkwk... shabat superrr

Balas

alim ah.. resep keneh scroll to path :)

Balas

gara2 kemarin make, jadi ngeshare deh

Balas

betul... saya juga rencana bikin tutorial faq's :)

Balas

izin repost nyak kang is? :D

Balas

bagus sekali kang ismet efeknya memang bagus :-d

Balas

yang HTML ditaruh di postingan, CSS di atas b:skin Kode javascriptnya ditaruh diman kang he,,, :)

Balas

Ilmu baru buat saya nih Kang,. di coba di terapkan di blog saya Kang
Terima kasih atas sharing nya.

Balas

hehe :D iya lagi blog baru :)
sepi ngak ada air, kekeringan [ bahaya ]
:D :D :p
- salam damai -

Balas

diatas </body>, jangan lupa pakai tag
<script type='text/javascript'>
isi script
</script>

Balas

Udah kang.... haturnuhun...
Body pading nya harus dihilangin ya kang?
soalnya jd ada jarak atas bawah template.

Balas

di sesuaikan aja.. yang body ga usah dibawa

Balas

makassar baji bajiji :D
info sangat bermanfaat :)
- salam damai -
Blogwalking yuk! :p

Balas

absen dulu kang hahahay lama gk kesini

Balas

kemana aja nih baru absen :)

Balas

wew di pasang juga Tombol back to topnnya :]
- artkel baru kang! - mohon di cicipi :p -
makasih udah share kang!
- Salam damai -

Balas

maaf ane jadi salah pake seharusnnya OpenID :p
- salam damai kang ismet -
komentar sendiri ngak pa'pa kan di bales! :D

Balas

Saya bookmark Kang, nanti kalau saya butuh bantuan saya hubungi jenengan ya.

Kesuwun artikelnya.

Balas

biasa kang anak sekolahan hahahay

Balas

wah akhirnya, lumayan bisa ditaruh di web nih yang awalnya main kasar sekarang bisa lebih alus

Balas

wew artikelnya kasar? :p bahaya :p [ yah kalo ane sih juga gitu ] sekarang yang langkahan dikit :D yang artikel sebelumnnya, ane ngak pernah ngeliat! :D
WOW! super sekali!
- Blogwalking yuk! -

Balas

Tutornnya ane baru liat nih kang, makasih udah share..
- kali ini mantab! - :D

Balas

naek turuna gancang euy jadi leklok, wkkwkwkkkww

Balas

hahhaha.... siga bulak balik ka talang kang :)

Balas

keren kang izin meramaikan dulu
[ absen di malam hari :) ]
- Blogwalking yuk! -

Balas

Blogwalking kang .... hehehe

emilseo.blogspot.com

Balas

jalan jalan kang

mantapweb.blogspot.com

Balas

absen di tolak, soalnya buku absennya ada di saya. wkwkw

Balas

Apsen lagi kang, mumpung belum update :)
[ saran nya dong kak, template baru nih ]
- salam damai! - daengrio

Balas
Komentar ini telah dihapus oleh pengarang.

Asikk kang, nih yg gw cari", izin coba ya ...

Balas

wew keren kang!
mantab ane suka yg smooth :)
Daengrio.com <---
- Blogwalking Yuk! -

Balas

mantab kang!
ane mau absen dulu ^_^
Daengrio.com <---
- Blogwalking Yuk! -

Balas

hehe, kan kang ismet yang pegang sekarang :p
Daengrio.com <---
- Blogwalking Yuk! -

Balas

izin nyimak kang!
semoga bermanfaat buat saya :)
Daengrio.com <---
- Blogwalking Yuk! -

Balas

absen kang!
malam gni gak bisa tidur, mending ke kangismet! ^_^
Daengrio.com <---- artikel terbaru!

Balas

ane juga kang!
artikel terbaru nih :)
Daengrio.com <---- artikel terbaru!

Balas

jquery biikkin lemott kanggg....

Balas

kadang suka bingun antara memilih kecepatan, stylish dan UI :)

Balas

Muhun Kang Hatur Nuhun pisan

Balas

berlaku untuk halaman lain juga nih ngga kang ?
Maksudnya anchor point akan diarahkan ke artikel lain, bukan di artikel yang sama

Balas

ngga, hanya pada halaman itu saja, kalau ke halaman lain, bisa dicoba
$(window).bind("load", function () {
var urlHash = window.location.href.split("#")[1];
$('html,body').animate({
scrollTop: $('#' + urlHash).offset().top
}, 4000);

Balas

kodenya ditumpuk jadi seperti ini tidak apa-apa 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>

Balas

selama script berpungsi ga apa2 ko..

Balas

scriptnya tidak berfungsi kang kalau ditumpukin....
Ngga jadi masang deh...hehee

Balas

Artikel yang bermanfaat kang, saya terapkan dulu ke template saya :D www.fajriandaviar.blogspot.com, hampura narok link :p

Balas

Menarik lagi nih Kang script nya, simak lagi Kang Ismet
Terima kasih atas infonya Kang

Balas

makasih kang atas ilmu nya..
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

Balas

kang kode yang <a href="#services">Services</a> kok kalo diklik mengarah ke halaman dashboard blogger, saya salah dimananya nih :(

contoh: http://kodesaja.blogspot.com/2014/01/membuat-breadcrumb-terindex-oleh-google.html

Balas

begitu posting.. jangan klik lagi mode Compose, atau supaya permanen bisa manual :
http://kodesaja.blogspot.com/2014/01/membuat-breadcrumb-terindex-oleh-google.html#pertama

Balas

lapor lagi kang, kok scrollnya gak lembut ya, seperti di demo punya kang ismet :(

Balas

bang, ane ada tugas ngedesain web dinamis, nah ini kok ga bisa smooth ya? padahal udah sesuai dengan panduan diatas, mohon bantuannya :)

Balas

alternatif pakai jQuery SmoothScroll bang, coba cari di web jquery

Balas

semacam Jump Link ya kang?

Balas

Thx banget nih kang, udah bisa scroll. Tapi kok nggak smooth ya? :(

Balas

Poskan Komentar


×
Chat