Assalamu'alaikum Wr. Wb.
Hallo teman-teman semua kali ini saya akan membagi ilmu saya sedikit tentang sedikit tentang gimana sih Cara Membuat Animation Scroll Top dengan JQuery.
Nah, kali ini saya akan berbagi ilmu saya tentang cara membuat animation scrollTop dengan JQuery.
Sebelum ke materi saya ingin menyampaikan kepada kalian semua, Saya bikin artikel ini untuk membantu kepada kalian yang sedang Kesulitan dan bingung gimana cara membuat animation scrollTop.
Oke kita lanjut kemateri, Gimana cara membuat animation scrollTop dengan JQuery. Sebelum kita membuat scriptnya kita siapkan dulu jquery.js -nya dulu, nah setelah di siapkan kita lannjut pembuatan scriptnya.
Oke pertama kita bikin Layoutnya untuk tampilan di web-nya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animation ScrollTop dengan JQuery</title>
</head>
<body>
<div id="menu">
<ul>
<li id="home">home</li>
<li id="artikel" onclick="tombol()">artikel</li>
</ul>
</div>
<div id="artikel">
Kami ingin Berbagi pengalaman dan menimpa ilmu.com
</div>
</body>
</html>
Nah setelah kita buat scriptnya htmlnya kita buat fungsi CSS-nya.
untuk fungsi CSS bisa di taru di atas script html.
<style type="text/css">
#menu{
width: 100%;
height: auto;
float: left;
}
#menu ul{
list-style: none;
}
#menu ul li{
width: 150px;
height: 30px;
padding: 0px 20px;
background: #f00;
float: left;
}
#artikel{
width: 100%;
height: 1000px;
float: left;
background: #F0F;
}
</style>
Nah setelah kita bikin Fungsi HTML dan CSS - nya kita bikin JavaScriptnya, untuk tempat javascriptnya bisa di taruh di bawah script HTML .
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function tombol(){
$("html,body").animate({scrollTop: 705}, 800);
}
</script>
Nah jika sudah semua maka save dengan type latihan.php atau latihan.html
Gimana cukup mudah kan,, semoga artikel kali ini bisa membantu kalian yang sedang kesusahan untuk membuat animation Scroll.
Sekian dari saya apabila ada salah ketik maupun bahasanya, saya minta maaf, terimakasih telah berkunjung ke blog saya ( Ayo Ngoprek IT ). Jangan lupa baca artikel lainnya terimakasih. :)
Nah, kali ini saya akan berbagi ilmu saya tentang cara membuat animation scrollTop dengan JQuery.
Sebelum ke materi saya ingin menyampaikan kepada kalian semua, Saya bikin artikel ini untuk membantu kepada kalian yang sedang Kesulitan dan bingung gimana cara membuat animation scrollTop.
Oke kita lanjut kemateri, Gimana cara membuat animation scrollTop dengan JQuery. Sebelum kita membuat scriptnya kita siapkan dulu jquery.js -nya dulu, nah setelah di siapkan kita lannjut pembuatan scriptnya.
Oke pertama kita bikin Layoutnya untuk tampilan di web-nya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Animation ScrollTop dengan JQuery</title>
</head>
<body>
<div id="menu">
<ul>
<li id="home">home</li>
<li id="artikel" onclick="tombol()">artikel</li>
</ul>
</div>
<div id="artikel">
Kami ingin Berbagi pengalaman dan menimpa ilmu.com
</div>
</body>
</html>
Nah setelah kita buat scriptnya htmlnya kita buat fungsi CSS-nya.
untuk fungsi CSS bisa di taru di atas script html.
<style type="text/css">
#menu{
width: 100%;
height: auto;
float: left;
}
#menu ul{
list-style: none;
}
#menu ul li{
width: 150px;
height: 30px;
padding: 0px 20px;
background: #f00;
float: left;
}
#artikel{
width: 100%;
height: 1000px;
float: left;
background: #F0F;
}
</style>
Nah setelah kita bikin Fungsi HTML dan CSS - nya kita bikin JavaScriptnya, untuk tempat javascriptnya bisa di taruh di bawah script HTML .
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function tombol(){
$("html,body").animate({scrollTop: 705}, 800);
}
</script>
Nah jika sudah semua maka save dengan type latihan.php atau latihan.html
Gimana cukup mudah kan,, semoga artikel kali ini bisa membantu kalian yang sedang kesusahan untuk membuat animation Scroll.
Sekian dari saya apabila ada salah ketik maupun bahasanya, saya minta maaf, terimakasih telah berkunjung ke blog saya ( Ayo Ngoprek IT ). Jangan lupa baca artikel lainnya terimakasih. :)
1 komentar: