¿Cómo desplazarse en acordeón hacia arriba para abrir contenido en Bootstrap?

Los acordeones Bootstrap son muy atractivos para ver en acción, pero cuando el elemento de contexto del acordeón es tan grande, hubo un problema para obtener la parte superior activa del acordeón. pero aquí aprenderá cómo lograr esa facilidad con la ayuda de unas pocas líneas de código JavaScript. Aquí usaremos la propiedad scrolltop para lograr esa función en Accordion.

Sintaxis:

  • Devuelve la propiedad scrollTop.
    element.scrollTop
  • Se utiliza para establecer la propiedad scrollTop
    element.scrollTop = value

Ejemplo:

  • Código JavaScript: todo lo que tiene que hacer es crear un acordeón Bootstrap normal y pegar la siguiente etiqueta de script int del código JavaScript y luego comenzará la acción.

    <script>
    $('#accordion').on('shown.bs.collapse', function () {
         
        var panel = $(this).find('.in');
         
        $('html, body').animate({
            scrollTop: panel.offset().top
        }, 500);
         
    });
    </script>
  • Programa:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Accordion scroll to open content</title>
        <link rel="stylesheet" href=
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
    crossorigin="anonymous">
        <script src=
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous">
        </script>
        <script src=
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
    crossorigin="anonymous">
        </script>
        <script src=
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
    crossorigin="anonymous">
        </script>
        <script>
            $('#accordion').on('shown.bs.collapse', function() {
      
                var panel = $(this).find('.in');
      
                $('html, body').animate({
                    scrollTop: panel.offset().top
                }, 500);
      
            });
        </script>
    </head>
      
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <span class="strong"
                          <a data-toggle="collapse" data-parent="#accordion"
                             href="#collapseOne"id="predict">
                             JavaScript 
                             <span class="caret"></span>
                          </a>
                        </span>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>
                              Either you love it or hate it, but in the age of Microservice
                              and REST API, you can not ignore JavaScript. JavaScript was 
                              once upon a time used only in client side(browser), but node 
                              js (execution engine/run time/web server) have made possible 
                              to run javascript on server side. JavaScript is everywhere – 
                              on Desktop/Server/Mobile.You can create mobile web app with 
                              javascript and html5, which has lot of advantages like save 
                              licensing cost $99 yearly to pay Apple or making IOS apps 
                              and you don’t have to purchase MAC laptop to make your IOS 
                              app(Apple’s app can only be made in MAC). JavaScript has 
                              stormed the web technology and nowadays small software ventures
                              to fortune 500, all are using node js for web apps. Recently 
                              wordpress.com has rewritten its dashboard in javascript, paypal
                              also chose to rewrite some of its components in javascript. 
                              Be it google/twitter/facebook, javascript is important for everyone.
                              It is used in applications like single-page applications, 
                              Geolocation APIs, net advertisements, etc. However JavaScript is
                              quirky/dynamic/scripting/ functional oriented language, and it has
                              its own idiosyncrasies. It is not scalable, it is good for some 
                              3000 line of code but for a bigger app, it becomes difficult to
                              manage, read and debug. Also, not everyone is very much familiar to 
                              JavaScript. You might sometimes think that I do not know much of a
                              JavaScript then “How to be JavaScript Developer without much 
                              knowledge of JavaScript?” To ease down our work, some smart 
                              developers/companies have made compiler/transpiler which converts 
                              your other language code into javascript code. (Best of both worlds)
                              C++: If you know C++, then it is possible to get it converted into 
                              JavaScript. Cheerp is a free compiler for open-source commercial 
                              projects as well as for closed source non commercial projects.It 
                              is the C++ compiler for the web.You just write a web application 
                              or port your existing one, all in C++. Cheerp will generate its 
                              JavaScript code that can run on any browser. Java: Java is a darling 
                              of open source, backed by Oracle /IBM/Google/Red hat. A maximum number
                              of developers in the world are Java developers (around 10 million). 
                              Maximum number of projects in github and apache are based on Java.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <span class="strong">
                            <a data-toggle="collapse" data-parent="#accordion"
                                               href="#collapseTwo" id="aries">
                               Python<span class="caret"></span>
                            </a>
                        </span>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>
                              Python is a widely used general-purpose, high level programming 
                              language. It was initially designed by Guido van Rossum in 1991 
                              and developed by Python Software Foundation. It was mainly developed
                              for emphasis on code readability, and its syntax allows programmers
                              to express concepts in fewer lines of code. Python is a programming
                              language that lets you work quickly and integrate systems more efficiently.
                              There are two major Python versions- Python 2 and Python 3. Both are 
                              quite different. Beginning with Python programming: 1) Finding an 
                              Interpreter: Before we start Python programming, we need to have an 
                              interpreter to interpret and run our programs. There are certain online
                              interpreters like https:
                              //ide.geeksforgeeks.org/, http://ideone.com/ or http://codepad.org/ 
                              that can be used to start Python without installing an interpreter.
                              Windows:There are many interpreters available freely to run Python 
                              scripts like IDLE ( Integrated Development Environment) which is installed
                              when you install the python software from http: //python.org/ Linux:
                              For Linux, Python comes bundled with the linux.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </center>
    </body>
      
    </html>
  • Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim 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 *