suchen

Heim >tägliche Programmierung >CSS-Kenntnisse >Wie kann man den Effekt erzielen, dass man in jquery durch Klicken auf die Webseite an den Anfang zurückkehrt? (Bilder + Videos)

Wie kann man den Effekt erzielen, dass man in jquery durch Klicken auf die Webseite an den Anfang zurückkehrt? (Bilder + Videos)

藏色散人
藏色散人Original
2018-10-13 13:53:486590Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung von JQuery-Code vorgestellt, um den Effekt zu erzielen, dass die Webseite wieder oben angezeigt wird.

Wenn wir die Seiten großer Websites durchsuchen, müssen wir alle darauf gestoßen sein. Beim Durchsuchen einer langen Seite wird beim Scrollen zum unteren Teil ein Schaltflächeneffekt angezeigt, der dem Zurückkehren zum oberen Teil ähnelt.

Dieser besondere Effekt des Zurückklickens nach oben kann das Benutzererlebnis erheblich verbessern. Dann ist es sehr einfach, eine solche Funktion zu implementieren.

Im Folgenden stellen wir Ihnen anhand eines einfachen Codebeispiels vor, wie Sie mit jquery die Funktion des Zurückklickens nach oben realisieren. 

<!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>

In diesem Code haben wir hauptsächlich auf eine JQuery-Onlinebibliothek verwiesen und einige einfache HTML-Seiten und JS-Code geschrieben, um zu beurteilen, ob die Höhe der Bildlaufleiste von oben größer als 150 ist erscheinen, andernfalls ist die Schaltfläche ausgeblendet. Greifen Sie schließlich über den Browser darauf zu. Der Effekt ist wie folgt:

Wie kann man den Effekt erzielen, dass man in jquery durch Klicken auf die Webseite an den Anfang zurückkehrt? (Bilder + Videos)

Dann ziehen wir die Bildlaufleiste nach unten und die Schaltfläche zum Zurückkehren nach oben wird langsam angezeigt Der Effekt ist wie folgt:

Wie kann man den Effekt erzielen, dass man in jquery durch Klicken auf die Webseite an den Anfang zurückkehrt? (Bilder + Videos)

Hinweis:

fadeIn() Die Methode verwendet das Einblenden Effekt, um das ausgewählte Element anzuzeigen, wenn das Element ausgeblendet ist. (In diesem Beispiel ist der Parameter auf 1000 Millisekunden eingestellt, was bedeutet, dass die Einblend-Übergangszeit des ausgewählten Elements 1000 Millisekunden beträgt. Wenn er auf 0 gesetzt ist, wird das ausgewählte Element sofort angezeigt.)

fadeOut() Methode verwendet den Fade-Effekt, um das ausgewählte Element auszublenden, sofern das Element ausgeblendet ist. (Gleiche Parameter wie oben)

In diesem Artikel geht es um jquery, um den Effekt der Rückkehr der Webseite nach oben zu implementieren . Es ist einfach und leicht zu verstehen an Freunde in Not!

Wenn Sie mehr über Frontend-bezogenes Wissen erfahren möchten, können Sie der chinesischen PHP-Website jQuery-Video-Tutorial oder HTML-Video-Tutorial, CSS-Video folgen Tutorial, Bootstrap-Video-Tutorial und andere verwandte Video-Tutorials, alle sind herzlich willkommen, sich darauf zu beziehen und zu lernen!

Das obige ist der detaillierte Inhalt vonWie kann man den Effekt erzielen, dass man in jquery durch Klicken auf die Webseite an den Anfang zurückkehrt? (Bilder + Videos). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery css bootstrap html JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie erreicht man den langsamen Vergrößerungseffekt von Bildern, wenn man in CSS3 mit der Maus darüber fährt (Bild, Text + Video)?Nächster Artikel：Wie erreicht man den langsamen Vergrößerungseffekt von Bildern, wenn man in CSS3 mit der Maus darüber fährt (Bild, Text + Video)?

In Verbindung stehende Artikel

Mehr sehen