Maison >développement back-end >Problème PHP >Comment obtenir un retour en haut en php

Comment obtenir un retour en haut en php

PHPzoriginal: 2023-04-13 09:11:20779parcourir

Retour en haut est une fonction qui permet aux utilisateurs de revenir facilement en haut de la page Web. Si le contenu de la page Web est long, les utilisateurs devront continuer à glisser vers le haut lors du défilement de la page, ce qui les fatiguera et les gênera. Par conséquent, l’ajout d’une fonction de retour en haut est très nécessaire.

Ici, nous présenterons l'utilisation de PHP pour implémenter la fonction de retour en haut.

Connaissances de base

Pour implémenter la fonction retour en haut, nous devons maîtriser les deux points de connaissances suivants :

JavaScript Script

Pour implémenter la fonction retour en haut sur une page web, le plus important est d'utiliser le Langage de script JavaScript. JavaScript est un langage de script côté client. En intégrant des scripts JavaScript dans HTML, des effets dynamiques peuvent être affichés et interagis.

Inclusion de fichiers PHP

Lorsque nous devons réutiliser une certaine logique de code, référencer des fichiers externes est un bon moyen. PHP fournit la fonction d'inclusion de fichier, qui nous permet de séparer le code du HTML et de rendre la logique du code réutilisable et maintenable.

Processus de mise en œuvre

Sur la base des connaissances de base ci-dessus, nous pouvons mettre en œuvre cette fonction de retour en haut. Voici le processus spécifique pour implémenter cette fonction :

1. Écrivez un script JavaScript

Tout d'abord, nous devons écrire un script JavaScript et l'enregistrer dans un fichier .js séparé, par exemple, dans un fichier nommé "scroll. js "Dans le fichier :

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;
}

Ce code enregistrera un événement d'écoute de barre de défilement et deux fonctions, qui sont utilisées pour déterminer s'il faut afficher et masquer le bouton de retour, et pour implémenter l'action de retour.

2. Créer un bouton de retour

Créez un élément bouton dans le fichier HTML Lorsque l'utilisateur clique, la fonction scrollTopFunction() définie en JavaScript sera appelée pour effectuer l'opération de retour : scrollTopFunction() 函数来执行返回操作：

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

该按钮元素的 id 属性为 scrollBtn，使用了 onclick 属性来注册一个点击事件，该事件将调用 scrollTopFunction() 函数，实现返回到顶部的操作。

为方便维护和重用代码，我们将这个 HTML 代码写在单独的一个文件 scroll-btn.html 中，然后把它作为一个变量包含到 index.php

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

. Le bouton L'attribut id de l'élément est scrollBtn, et l'attribut onclick est utilisé pour enregistrer un événement de clic, qui appellera scrollTopFunction() code> pour implémenter l'opération de retour en haut.

Pour faciliter la maintenance et la réutilisation du code, nous écrivons ce code HTML dans un fichier séparé scroll-btn.html, puis l'incluons en tant que variable dans le fichier

index.php code> : <p></p>
<pre class="brush:php;toolbar:false">&lt;?php echo $scrollBtn;?&gt;
&lt;script src=&quot;scroll.js&quot;&gt;&lt;/script&gt;</pre>3. Introduisez le script JavaScript et le bouton de retour <p></p>Ajoutez le code suivant aux fichiers JavaScript et HTML que nous avons introduits précédemment dans la page : <h3><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP Scroll to Top Button</title>
</head>
<body>
    <?php
        $scrollBtn = file_get_contents("scroll-btn.html");
        echo $scrollBtn;
    ?>
    <h1>PHP Scroll to Top Button</h1>
    <p>
        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.
    </p>
    <p>
        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.
    </p>
    <p>
        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.
    </p>
    <p>
        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.
    </p>
</body>
&lt;?php echo $scrollBtn;?&gt;
&lt;script src=&quot;scroll.js&quot;&gt;&lt;/script&gt;
</html></pre></h3>Ceci contiendra le bouton de retour défini à l'étape précédente et le script JavaScript. <p></p>4. Code complet<h2></h2>Voici le code PHP complet :<p>rrreee</p>Résumé🎜🎜Jusqu'à présent, nous avons appris à utiliser PHP et JavaScript pour ajouter la fonction de retour en haut. Cette fonctionnalité aide les utilisateurs à parcourir le contenu des pages plus facilement et améliore l'expérience utilisateur et la qualité globale des pages. J'espère que cet article pourra aider les lecteurs qui ont besoin d'implémenter cette fonction. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment configurer un environnement php sur l'hébergeur Alibaba Cloud Hong KongArticle suivant：Comment configurer un environnement php sur l'hébergeur Alibaba Cloud Hong Kong

Articles Liés

Voir plus