Kembali ke atas ialah fungsi yang membolehkan pengguna kembali ke bahagian atas halaman web dengan mudah. Jika kandungan halaman web panjang, pengguna perlu terus meluncur ke atas apabila menatal halaman, yang akan membuatkan pengguna berasa letih dan tidak selesa. Oleh itu, menambah fungsi kembali ke atas adalah sangat diperlukan.

Di sini, kami akan memperkenalkan penggunaan PHP untuk melaksanakan fungsi kembali ke atas.

Pengetahuan asas

Untuk melaksanakan fungsi kembali ke atas, kita perlu menguasai dua mata pengetahuan berikut:

Skrip JavaScript

Realisasikan pulangan ke fungsi teratas pada halaman web, perkara yang paling penting ialah menggunakan bahasa skrip JavaScript. JavaScript ialah bahasa skrip sebelah klien Dengan membenamkan skrip JavaScript dalam HTML, kesan dinamik boleh dipaparkan dan berinteraksi dengannya.

Fail PHP mengandungi

Apabila kita perlu menggunakan semula beberapa logik kod, merujuk fail luaran adalah cara yang baik. PHP menyediakan fungsi termasuk fail, yang membolehkan kami memisahkan kod daripada HTML dan menjadikan logik kod boleh digunakan semula dan diselenggara.

Proses pelaksanaan

Berdasarkan pengetahuan asas di atas, kita boleh melaksanakan fungsi kembali ke atas ini. Berikut ialah proses khusus untuk melaksanakan fungsi ini:

1 Tulis skrip JavaScript

Pertama, kita perlu menulis skrip JavaScript dan menyimpannya dalam fail .js yang berasingan, contohnya. , Dalam fail bernama "scroll.js":

window.onscroll = function() {
    scrollFunction()
};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("scrollBtn").style.display = "block";
    } else {
        document.getElementById("scrollBtn").style.display = "none";
    }
}

function scrollTopFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

Kod ini akan mendaftarkan acara mendengar bar skrol dan dua fungsi, yang digunakan untuk menentukan sama ada untuk memaparkan dan menyembunyikan butang kembali dan untuk melaksanakan tindakan kembali.

2. Cipta butang kembali

Buat elemen butang dalam fail HTML Apabila pengguna mengklik, fungsi scrollTopFunction() yang ditakrifkan dalam JavaScript akan dipanggil untuk melaksanakan operasi pemulangan:

<button onclick="scrollTopFunction()" id="scrollBtn" title="返回顶部">&#9650;</button>

Atribut id bagi elemen butang ialah scrollBtn dan atribut onclick digunakan untuk mendaftarkan acara klik, yang akan memanggil fungsi scrollTopFunction() untuk kembali ke atas.

Untuk memudahkan penyelenggaraan dan penggunaan semula kod, kami menulis kod HTML ini dalam fail berasingan scroll-btn.html, dan kemudian memasukkannya sebagai pembolehubah dalam fail index.php:

<?php
    $scrollBtn = file_get_contents("scroll-btn.html");
?>

3 . Perkenalkan skrip JavaScript dan butang belakang

Tambahkan kod berikut pada fail JavaScript dan HTML yang kami perkenalkan sebelum ini dalam halaman:

<?php echo $scrollBtn;?>
<script src="scroll.js"></script>

Ini akan mengandungi kod yang ditakrifkan dalam langkah sebelumnya Kembali butang dan skrip JavaScript.

4. Kod lengkap

Berikut ialah kod PHP lengkap:

    
    
    



    
    
PHP Scroll to Top Button
    

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer faucibus urna eu turpis efficitur, vitae molestie dui tincidunt. Sed euismod vitae sapien sit amet interdum. Maecenas volutpat fringilla enim cursus vehicula. In porttitor elit vel elit pharetra, quis tristique justo placerat. Integer ultricies at tellus vel rhoncus. Duis turpis lectus, facilisis in enim sed, sollicitudin tincidunt eros. Praesent rutrum lacus id ligula fermentum, et ullamcorper purus semper. Morbi bibendum orci non nisi hendrerit, imperdiet tempor turpis rhoncus.
    
    

        Vivamus hendrerit mattis est ac dapibus. Sed rutrum, tellus at bibendum hendrerit, sapien nisi luctus magna, et pulvinar ipsum orci in odio. Maecenas lacus metus, egestas eu congue et, tincidunt non justo. Donec ut mauris risus. Praesent vel egestas libero, at feugiat risus. Donec ac nulla justo. Sed sed elementum odio. Nullam vestibulum pharetra mi, tempus fringilla leo rhoncus ut. In hac habitasse platea dictumst.
    
    

        Phasellus vestibulum gravida sapien, ac dictum dui tempor sit amet. Integer ac commodo ipsum, quis varius dui. Etiam eget felis eu elit fringilla euismod. Sed ut faucibus odio. Aliquam in laoreet velit. Etiam quis sapien vel sapien rutrum placerat. Aliquam ut justo vel libero fermentum facilisis. Quisque bibendum sit amet enim ut venenatis. Nulla facilisi.
    
    

        Nunc non ex risus. Donec sed velit non nulla pellentesque suscipit vitae lobortis ex. Sed id mi id dui congue commodo non nec justo. Maecenas vel hendrerit augue. Fusce dignissim ligula sed rutrum dignissim. Ut a lectus porttitor, eleifend sapien sit amet, bibendum nisi. Suspendisse eu sapien eget elit vehicula sagittis. Maecenas vitae laoreet nulla. Sed eu nisl malesuada lorem suscipit feugiat at malesuada odio.
    

<?php echo $scrollBtn;?>
<script src="scroll.js"></script>

Ringkasan

Setakat ini, kami telah belajar menggunakan PHP dan JavaScript untuk menambah keupayaan untuk kembali ke atas. Ciri ini membantu pengguna menyemak imbas kandungan halaman dengan lebih mudah dan meningkatkan pengalaman pengguna serta kualiti halaman keseluruhan. Saya harap artikel ini dapat membantu pembaca yang perlu melaksanakan fungsi ini.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kembali ke atas dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!