Melompat ke Bagian Tertentu dari Halaman HTML ~ Pemrograman dan Teknologi

Untuk melompat ke elemen tertentu dari halaman, kita bisa menggunakan atribut href (pada tag <a>) dan atribut id (yang terdapat dalam Elemen HTML tujuan). Atribut href harus berisi nama id yang terdapat dalam tag tujuan. Selain itu, nama id dalam href juga harus diawali dengan tanda pagar (#).

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <a href="#target">Klik untuk Berpindah!!!</a><br />
    <a href="#akhir">Klik untuk Berpindah ke akhir halaman!!!</a>
    <SCRIPT>
        for(i=0;i<200;i++)document.write("<p>Ini adalah baris ke-"+i+"</p>");
    </SCRIPT>
    <p id="target"><b>Sebelum akhir halaman</b></p>    
    <p id="akhir">Akhir halaman</p>
</BODY>
</HTML>

Klik linknya untuk berpindah ke elemen HTML yang memiliki Id!

Selanjutnya, bagaimana jika kita ingin ke awal halaman tanpa tag <a>?
Kita bisa menggunakan Javascript untuk memindahkan tampilan ke bagian tertentu di dalam Halaman yang kita buka. Method yang bisa digunakan untuk memindahkan halaman adalah scrollIntoView.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <button onclick="lompat()">Klik untuk Berpindah!!!</button>
    <SCRIPT>
        for(i=0;i<200;i++)document.write("<p>Ini adalah baris ke-"+i+"</p>");
    </SCRIPT>
    <p id="akhir">Akhir halaman</p>
    <SCRIPT>
        function lompat(){
            var elemen=document.getElementById("akhir");
            elemen.scrollIntoView();
        }
    </SCRIPT>
</BODY>
</HTML>

Jika pada contoh sebelumnya yang kita gunakan adalah tag <a> dan id, maka yang digunakan pada contoh kode HTML kedua di atas adalah button dan objek yang didapat dengan method getElementById(). Method getElementById() bisa kalian dengan method sejenis seperti getElementsByClassName(), getElementsByTagName(), QuerySelector, dll. Method scrollIntoVIew bisa kalian gunakan pada objek dari elemen HTML.

Melompat Ke Bagian Atas Halaman
Selain menggunakan method scrollIntoview dari objek yang mewakili elemen HTML, kalian juga bisa menggunakan properti scrollTop dari objek "document.documentElement". Untuk Safari, yang digunakan adalah objek "document.body". Properti scrollTopbisa diberi nilai 0 untuk membuat halaman kembali ke posisi paling atas dari halaman.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
    <h2>Awal halaman</h2>
    <SCRIPT>
        for(i=0;i<200;i++)document.write("<p>Ini adalah baris ke-"+i+"</p>");
    </SCRIPT>
    <button onclick="lompat()">Klik untuk Kembali!!!</button>
    <SCRIPT>
        function lompat(){
            document.documentElement.scrollTop = 0;//Untuk Firefox, Chrome, IE, Opera, dll
            document.body.scrollTop=0;//Untuk Safari
        }
    </SCRIPT>
</BODY>
</HTML>

Jadikan Tampilannya Lebih Menarik?
Untuk membuat tampilannya jadi lebih menarik, kita bisa mengubah bentuk tombolnya. Kita juga bisa menyembunyikan tombolnya sebelum berada pada posisi tertentu saat ada event "onscroll".

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <STYLE>
        #BackToTop {min-width:64px;min-height:64px;border-radius:50%;z-index:90;position:fixed;bottom:25px;right:-80px;overflow:hidden;display:none;background:green;transition:all .5s ease-out;text-align:center;}
        #BackToTop a{text-decoration:none; color:#fff;font-size:20px;position:absolute;left:50%;top:50%;-ms-transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);transform: translateY(-50%) translateX(-50%);}
        #BackToTop:hover {background:gold;color:#fff;}
    </STYLE>
</HEAD>
<BODY>
    <h2>Awal halaman</h2>
    <SCRIPT>
        for(i=0;i<200;i++)document.write("<p>Ini adalah baris ke-"+i+"</p>");
    </SCRIPT>
    <div id="BackToTop" onclick="lompat()" style="right: 25px;">
        <a href="#">Up</a></div>
    </div>
    <SCRIPT>
        function lompat(){
            document.documentElement.scrollTop = 0;//Untuk Firefox, Chrome, IE, Opera, dll
            document.body.scrollTop=0;//Untuk Safari
        }
    
        window.onscroll=function(){
            var tombol=document.getElementById("BackToTop");
            if((document.documentElement.scrollTop >= 20) || (document.body.scrollTop >= 20)){
                tombol.style.display = "block";
            }else{
                tombol.style.display = "none";
            }
        }
    </SCRIPT>
</BODY>
</HTML>

Seharusnya, tombol "up" tidak akan terlihat saat program baru dibuka, kecuali jika posisi tampilannya sudah diubah. Tombol baru akan terlihat saat halaman discroll dengan jarak tertentu dari atas. Untuk lebih jelasnya, lebih baik ketik dan coba saja lihat hasilnya sendiri.