[trick] Membuat PageScroll Dengan Javascript

Biasanya kita melihat di web, jika kita turunkan halaman webnya akan ada tulisan atau gambar untuk kembali ke atas kembali, kira-kira bagaimana ya membuatnya. berikut adalah kodenya:


<script type="text/javascript">
var x;
var y;
function scrolling(){
var x = document.getElementById("halaman");
var y = window.pageYOffset;
var cek = document.getElementById("kembali");
if(y > 150){
cek.innerHTML="<p style='position:fixed;top:200px; left:50%;'> <a href='#' onclick='atas()'>Kembali keatas</p>";
}else{
cek.innerHTML="";
}
}
window.addEventListener("scroll", scrolling);

function atas(){
window.pageYOffset=0;
}
</script>
</head>

<body>

<div id="halaman" style="background-color:#F00; color:#FFF; height:50px; text-align:center;">Header</div>
<div id="kembali"></div>

Tampilan Awal :

a

jika webnya di turunkan hasilnya sebagai berikut:

b

Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: