RELA dan IKHLAS BERBAGI

lelampak datu adalah situs belajar desain grafis dan web

» » Cara mebuat scroll back to top dengan Jquery

Cara mebuat scroll back to top dengan Jquery

Mutiara sasak
Add Comment
JQUERY
Wednesday, 1 October 2014
Pada  tutorial kali ini saya akan menunjukkan kepada Anda bagaimana cara menambahkan tombol scroll ke atas dengan tinngi tampilan  pada web  mencapai 70% .  Maka akan muncul panahpilkan panah dan teks "Kembali ke Atas". seperti yang ada bada blog ini ketika scrroll bar sudah mencapai 70% maka pada blog ini akan muncul gambar tanda panah. Dan jika anda klik maka anda akan dibawa kembali keatas atau ke header website. langsung saj ini dia source code-nya:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>jQuery scroll to top animation | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      img {border-width: 0}
      * {font-family:'Lucida Grande', sans-serif;}
    </style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> 
<script>
$(document).ready(function(){
var height = $( document ).height(); // returns height of HTML document
var scroll = (height/100)*70;
    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > scroll) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});
</script>
<style type="text/css">
#back-top {
    position: fixed;
    bottom: 95px;
    margin-left: -150px;
}
#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(upArrow.png) no-repeat center center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}
</style>
</head>
<body id="top">
<h2>jQuery scroll to top animation Example.&nbsp;&nbsp;&nbsp;=> <a href="http://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>

<!-- Your Content goes Here -->

<!-- Go to top button -->
<p id="back-top">
    <a href="#top"><span></span>Back to Top</a>
</p>
</body>

</html>

Selamat mencoba semoga bermanfaat. Terimakasih
0 Komentar untuk "Cara mebuat scroll back to top dengan Jquery"