Membuat Smooth Scroll dengan JQuery
Halo teman teman Dumenity, kembali lagi di panduan panduan pemrogramman blog, di bahan ini kita akan belajar bagaimana Membangun Smooth Scroll dengan JQuery. yuk kita praktekan teman teman.
seperti lazim 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 pun.
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 karenanya akan men scroll ke arah tulisan dummy lorem ipsum itu secara halus, karena telah kita pengaturan di jqeury nya teman teman.
sekianlah panduan Membangun Smooth Scroll dengan JQuery, semoga bermanfaat yah teman teman
Sumber https://kursuswebsite.org
