jqueryでWebページをクリックしてトップに戻る効果を実現するにはどうすればよいですか? (写真 + ビデオ)-CSSの知識-php.cn

jqueryでWebページをクリックしてトップに戻る効果を実現するにはどうすればよいですか? (写真 + ビデオ)

藏色散人

リリース： 2018-10-13 16:46:00

オリジナル

6570 人が閲覧しました

この記事では、jquery コードを使用して Web ページを最上位に戻す効果を実現する方法を主に紹介します。

大手Webサイトのページを閲覧していると、長いページを閲覧しているときに下の方までスクロールすると、先頭に戻るようなボタン効果が表示されるという現象に遭遇したことがあるのではないでしょうか。

クリックしてトップに戻るという特別な効果により、ユーザーエクスペリエンスが大幅に向上します。このような関数を実装するのは非常に簡単です。

以下では、簡単なコード例を使用して、jquery を使用してトップ へのクリックを実現する機能的な方法を紹介します。

<!DOCTYPE html>
<html>
<head>
    <title>回到顶部特效</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        body {
            text-align: center;
        }
        h1 {
            width: 1200px;
            height: 1500px;
            background: #eee;
            margin: 30px auto;
        }
        a {
            text-decoration: none;
            color: #fff;
        }
        p#back {
            text-align: center;
            position: fixed;
            bottom: 100px;
            right: 60px;
            background: #000;
            border-radius: 3px;
            height: 50px;
            width: 80px;
            display: none;
        }
    </style>
</head>
<body>
<h1>网页内容</h1>
<a href=""><p id="back"><br> 返回顶部</p></a>
</body>
<script>
    // 文档就绪
    $(function () {
        // 获取浏览器窗口
        $(window).scroll(function () {
            // 获取浏览器滚动条距离顶部的高度
            if ($(window).scrollTop() > 150) {
                // 设置按钮出现
                $(&#39;#back&#39;).fadeIn(1000)
            } else {
                // 设置按钮消失
                $(&#39;#back&#39;).fadeOut(1000)
            }
        })
    })
</script>
</html>

ログイン後にコピー

このコードでは主にjqueryのオンラインライブラリを参照し、スクロールバーの上端からの高さが150を超えると設定ボタンが表示されるかを判定するための簡単なHTMLページとjsコードを記述しました。 . 、それ以外の場合、ボタンは非表示になります。最後にブラウザからアクセスすると、次のような効果が得られます。

jqueryでWebページをクリックしてトップに戻る効果を実現するにはどうすればよいですか? (写真 + ビデオ)

次に、スクロールバーを下にドラッグすると、上に戻るボタンがゆっくりと表示されます。

jqueryでWebページをクリックしてトップに戻る効果を実現するにはどうすればよいですか? (写真 + ビデオ)

注:

fadeIn() このメソッドはフェードイン効果を使用します。要素が非表示の場合に、選択した要素を表示します。 (この例では、パラメーターは 1000 ミリ秒に設定されています。これは、選択した要素のフェードイン遷移時間が 1000 ミリ秒であることを意味します。0 に設定すると、選択した要素がすぐに表示されます。)

fadeOut() メソッドは、要素が非表示の場合、フェードアウト効果を使用して選択された要素を非表示にします。 (パラメータは上記と同じです)

今回はWebページをトップに戻す効果を実現するためのjqueryの導入についての記事です。シンプルで分かりやすいです。困っている友達に役立つことを願っています!

フロントエンド関連の知識について詳しく知りたい場合は、PHP 中国語 Web サイトの

jQuery ビデオチュートリアルまたは HTML ビデオチュートリアル、CSS ビデオを参照してください。チュートリアル、ブートストラップビデオチュートリアル、およびその他の関連ビデオチュートリアルを参照して学習することを歓迎します。

以上がjqueryでWebページをクリックしてトップに戻る効果を実現するにはどうすればよいですか? (写真 + ビデオ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。