¿Cómo saltar a la parte superior de la página del navegador usando jQuery?

Cuando el sitio web contiene una gran cantidad de datos en una sola página y mientras mira hacia abajo, si el usuario desea ver el contenido principal, es decir, la parte superior de la página del navegador sin desplazarse, esto se puede lograr mediante el uso de jQuery .

Ejemplo: Saltar a la parte superior de la página del navegador

<html>
<head>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
     <script>
         $(function () 
         {
             $('#Top').click(function () 
             {
                 $('html, body').animate(
                     {
                     scrollTop: '0px'
                 },
                 1500);
                 return false;
             });
         });
    </script>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>Welcome to GeeksforGeeks</h2>
        <h4>Glad to see you!!</h4>
        <h5>A Computer Science portal for the geeks.</h5>
        <p>It is the complete portal for learning in Computer Science field.</p>
        <p>GeeksforGeeks portal contain every basic to hard knowledge regarding
        Computer Science field.</p>
        <p>You can also share interview experience here to help other geeks.</p>
        <p>It also focuses on GATE, provides notes, previous year question papers,
        last minute notes, etc.</p>
        <p>GeeksforGeeks provides opportunity for the geeks to contribute
        and help other geeks.</p>
        <a id="scrlTop" href="#">Scroll to Top</a>
    </center>
</body>
</html>

Producción :

Antes de hacer clic en «Desplazarse hacia arriba»

Después de hacer clic en «Desplazarse hacia arriba»

En el ejemplo anterior, cuando hacemos clic en el enlace «Desplazarse hacia arriba» , salta automáticamente a la parte superior de la página del navegador.

Publicación traducida automáticamente

Artículo escrito por vaishalichauhan3003 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *