So erreichen Sie in PHP die Rückkehr zum Anfang-PHP-Problem-php.cn

So erreichen Sie in PHP die Rückkehr zum Anfang

PHPz

Freigeben： 2023-04-13 10:15:47

Original

789 Leute haben es durchsucht

Zurück zum Anfang ist eine Funktion, mit der Benutzer problemlos zum Anfang der Webseite zurückkehren können. Wenn der Inhalt der Webseite lang ist, müssen Benutzer beim Scrollen der Seite ständig nach oben rutschen, was dazu führt, dass sich Benutzer müde und unwohl fühlen. Daher ist das Hinzufügen einer Funktion „Zurück zum Anfang“ unbedingt erforderlich.

Hier stellen wir die Verwendung von PHP zur Implementierung der Funktion „Zurück zum Anfang“ vor.

Grundkenntnisse

Um die Funktion „Zurück zum Anfang“ zu implementieren, müssen wir die folgenden zwei Wissenspunkte beherrschen:

JavaScript-Skript

Um die Funktion „Zurück zum Anfang“ auf einer Webseite zu implementieren, ist es am wichtigsten, das zu verwenden JavaScript-Skriptsprache. JavaScript ist eine clientseitige Skriptsprache. Durch die Einbettung von JavaScript-Skripten in HTML können dynamische Effekte angezeigt und interagiert werden.

PHP-Dateieinbindung

Wenn wir Codelogik wiederverwenden müssen, ist der Verweis auf externe Dateien eine gute Möglichkeit. PHP bietet die Datei-Include-Funktion, die es uns ermöglicht, Code von HTML zu trennen und die Codelogik wiederverwendbar und wartbar zu machen.

Implementierungsprozess

Basierend auf den oben genannten Grundkenntnissen können wir diese Return-to-Top-Funktion implementieren. Das Folgende ist der spezifische Prozess zum Implementieren dieser Funktion:

1. Schreiben Sie ein JavaScript-Skript

Zuerst müssen wir ein JavaScript-Skript schreiben und es in einer separaten .js-Datei speichern, zum Beispiel in einer Datei mit dem Namen „scroll“. js „In der Datei:

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

Nach dem Login kopieren

Dieser Code registriert ein Abhörereignis für die Bildlaufleiste und zwei Funktionen, die verwendet werden, um zu bestimmen, ob die Zurück-Schaltfläche angezeigt und ausgeblendet werden soll, und um die Zurück-Aktion zu implementieren.

2. Erstellen Sie eine Zurück-Schaltfläche

Erstellen Sie ein Schaltflächenelement in der HTML-Datei. Wenn der Benutzer klickt, wird die in JavaScript definierte Funktion scrollTopFunction() aufgerufen, um den Zurück-Vorgang auszuführen: scrollTopFunction() 函数来执行返回操作：

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

Nach dem Login kopieren

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

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

Die Schaltfläche Das id-Attribut des Elements ist scrollBtn, und das onclick-Attribut wird verwendet, um ein Klickereignis zu registrieren, das scrollTopFunction() Code>-Funktion zum Implementieren der Operation zum Zurückkehren nach oben.

Um die Wartung und Wiederverwendung des Codes zu erleichtern, schreiben wir diesen HTML-Code in eine separate Datei scroll-btn.html und fügen ihn dann als Variable in die Datei

index.php code> ein : <p></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;?php
    $scrollBtn = file_get_contents(&quot;scroll-btn.html&quot;);
?&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div>3. JavaScript-Skript und Zurück-Schaltfläche einführen <p></p>Fügen Sie den folgenden Code zu den JavaScript- und HTML-Dateien hinzu, die wir zuvor auf der Seite eingeführt haben: <h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;?php echo $scrollBtn;?&gt;
&lt;script src=&quot;scroll.js&quot;&gt;&lt;/script&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div></h3>Dies enthält die im vorherigen Schritt definierte Zurück-Schaltfläche und das JavaScript-Skript. <p></p>4. Vollständiger Code<h2></h2>Hier ist der vollständige PHP-Code:<p></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Nach dem Login kopieren</div></div>Zusammenfassung🎜🎜Bisher haben wir gelernt, PHP und JavaScript zu verwenden, um die Funktion zum Zurückkehren nach oben hinzuzufügen. Diese Funktion erleichtert Benutzern das Durchsuchen von Seiteninhalten und verbessert das Benutzererlebnis sowie die Gesamtqualität der Seite. Ich hoffe, dieser Artikel kann Lesern helfen, die diese Funktion implementieren müssen. 🎜

Das obige ist der detaillierte Inhalt vonSo erreichen Sie in PHP die Rückkehr zum Anfang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!