Halo teman teman Dumenity, kembali lagi di tutorial tutorial pemrogramman website, pada materi ini kita akan belajar bagaimana Membuat Smooth Scroll dengan JQuery. yuk kita praktekan teman teman.
seperti biasa kita siapkan 3 ddile yakni index html, style css dan main js nya.
di index html kita ketikan struktur html berikut yah teman teman
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <button>submit</button> <div id="here"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia rem, sapiente, recusandae ipsam dignissimos earum, consequatur totam dolore sint provident neque sequi ullam? Repudiandae assumenda similique iusto voluptatem molestiae ipsum.</p> </div> </div> </body> </html>
lalu jangan lupa di sambukan dengan jquery CDN nya yah dan main js nya juga.
setelah itu di css nya kita ketikan script berikut.
body{font-family: arial;}
.container{
height: 1200px;
}
button{
padding: 10px;
background: #c31432; /* fallback for old browsers */
background: -webkit-linear-gradient(left, #240b36, #c31432);
background: -o-linear-gradient(left, #240b36, #c31432);
background: linear-gradient(to right, #240b36, #c31432); /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
;
color: #fff;
border: none;
box-shadow: 2px 2px #9e9e9e;
cursor: pointer;
width: 200px;
border-radius: 5px;
}
button:active {
background: #c31432; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #240b36, #c31432); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #240b36, #c31432); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: none;
transition: background 0.2s;
}
#here{
margin-top: 60%;
background: lightblue;
padding:20px;
color:#fff;
}
dan di main js nya seperti berikut teman teman
$(function(){
$('button').click(function(){
$('html, body').animate({
scrollTop: $('#here').offset().top
},1000)
console.log($('#here').offset());
});
})
hasilnya seperti berikut teman teman
nah ketika kita klik tombol submit nya maka akan men scroll ke arah tulisan dummy lorem ipsum itu secara halus, karena sudah kita setting di jqeury nya teman teman.
sekian tutorial Membuat Smooth Scroll dengan JQuery, semoga bermanfaat yah teman teman
The post Membuat Smooth Scroll dengan JQuery appeared first on Kursus Website Terbaik.