Heim > Artikel > Web-Frontend > So scrollen Sie mit jQuery schnell zum Seitenanfang

So scrollen Sie mit jQuery schnell zum Seitenanfang

coldplay.xixiOriginal: 2020-12-17 14:53:143411Durchsuche

So scrollen Sie mit jQuery schnell zum Seitenanfang: Wenn Sie den Positionsparameter auf 0 setzen, wird die Seite nach oben gescrollt [$(window).scrollTop(position); 】.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery3.2.1-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: JQuery-Video-Tutorial

So scrollen Sie in jQuery schnell zum Seitenanfang:

In jQuery können Sie die scrollTo()-Methode verwenden, um schnell zum Seitenanfang zu scrollen. Die scrollTo()-Methode von jQuery wird verwendet, um die vertikale Bildlaufleistenposition des ausgewählten Elements festzulegen oder zurückzugeben. Sie können dieses Verhalten verwenden, um zum Seitenanfang zu scrollen, indem Sie diese Methode auf die Fenstereigenschaft anwenden. Wenn Sie einfach den Positionsparameter auf 0 setzen, wird die Seite nach oben gescrollt.

Syntax:

$(window).scrollTop(position);

Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
    .scroll {
        height: 1000px;
        background-color: palegoldenrod;
    }
</style>
</head>
<h2>使用jQuery快速滚动到页面顶部</h2>
    <p>单击下面的按钮，滚动到页面顶部</p>
    <p class="scroll">这里一段测试文本！这里一段测试文本！这里一段测试文本！</p>
    <button onclick="scrollToTop()">单击，滚动到顶部</button>
    <script src= "https://code.jquery.com/jquery-3.3.1.min.js"> </script>
    <script>
        function scrollToTop() {
            $(window).scrollTop(0);
        }
    </script>
</body>
</html>

Am Ende der Seite, bevor Sie auf die Schaltfläche klicken:

So scrollen Sie mit jQuery schnell zum Seitenanfang

Nach dem Klicken auf die Schaltfläche:

So scrollen Sie mit jQuery schnell zum Seitenanfang

Verwandte kostenlose Lernempfehlungen: Javascript Lernanleitung

Das obige ist der detaillierte Inhalt vonSo scrollen Sie mit jQuery schnell zum Seitenanfang. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：So verwenden Sie Toggle in JQueryNächster Artikel：So verwenden Sie Toggle in JQuery

In Verbindung stehende Artikel

Mehr sehen