PHPでトップに戻る方法

PHPz

リリース： 2023-04-13 10:15:47

オリジナル

592 人が閲覧しました

トップに戻るは、Web ページのトップに簡単に戻ることができる機能です。 Web ページのコンテンツが長い場合、ユーザーはページをスクロールするときに上にスライドし続ける必要があり、ユーザーは疲れて不便に感じます。したがって、トップに戻る機能の追加は非常に必要です。

ここでは、PHPを使ってトップに戻る機能を実装する方法を紹介します。

基礎知識

トップに戻る機能を実装するには、次の 2 つの知識を習得する必要があります。

JavaScript

トップに戻る機能を実現するWeb ページの関数を使用する場合、最も重要なことは JavaScript スクリプト言語を使用することです。 JavaScript はクライアント側のスクリプト言語であり、HTML に JavaScript スクリプトを埋め込むことで、動的な効果を表示したり操作したりできます。

PHP ファイルには次の内容が含まれています

特定のコードロジックを再利用する必要がある場合、外部ファイルを参照するのが良い方法です。 PHP は、ファイルインクルード関数を提供します。これにより、HTML からコードを分離し、コードロジックを再利用可能および保守可能にすることができます。

実装プロセス

上記の基本知識に基づいて、この先頭に戻る機能を実装できます。この関数を実装するための具体的なプロセスは次のとおりです:

1. JavaScript スクリプトを作成する

まず、JavaScript スクリプトを作成し、別の .js ファイルに保存する必要があります。 , 「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;
}

ログイン後にコピー

このコードは、スクロールバーのリスニングイベントと 2 つの関数を登録します。これらの関数は、戻るボタンを表示するか非表示にするかを決定し、戻るボタンを実装するために使用されます。アクション。。

2. 戻るボタンの作成

HTML ファイル内にボタン要素を作成します。ユーザーがクリックすると、JavaScript で定義された scrollTopFunction() 関数が呼び出されます。 return 操作を実行します:

ログイン後にコピー

ボタン要素の id 属性は scrollBtn であり、クリックを登録するために onclick 属性が使用されますイベント。 scrollTopFunction() 関数を呼び出して、先頭に戻る操作を実装します。

コードのメンテナンスと再利用を容易にするために、この HTML コードを別のファイル scroll-btn.html に記述し、それを変数として index.php# に組み込みます。 ## ファイル内:

ログイン後にコピー

3. JavaScript スクリプトと戻るボタンを導入します

ページ内で前に紹介した JavaScript および HTML ファイルに次のコードを追加します:

ログイン後にコピー

これには、前の手順で定義した「戻る」ボタンと JavaScript が含まれます。

4. 完全なコード

以下は完全な PHP コードです:

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 と JavaScript を使用して次のことを行う方法を学びました。トップに戻る機能を追加します。この機能により、ユーザーはページコンテンツをより簡単に閲覧できるようになり、ユーザーエクスペリエンスとページ全体の品質が向上します。この記事が、この機能を実装する必要がある読者の助けになれば幸いです。

以上がPHPでトップに戻る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。