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() {varpanel = $(this).find('.in');$('html, body').animate({scrollTop: panel.offset().top}, 500);});</script> - Programa:
<!DOCTYPE html><html><head><title>Accordion scroll to open content</title><linkrel="stylesheet"href=integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><scriptsrc=integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><scriptsrc=integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><scriptsrc=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><divclass="panel-group"id="accordion"><divclass="panel panel-default"><divclass="panel-heading"><spanclass="strong"><adata-toggle="collapse"data-parent="#accordion"href="#collapseOne"id="predict">JavaScript<spanclass="caret"></span></a></span></div><divid="collapseOne"class="panel-collapse collapse"><divclass="panel-body"><p>Either you love it or hate it, but in the age of Microserviceand REST API, you can not ignore JavaScript. JavaScript wasonce upon a time used only in client side(browser), but nodejs (execution engine/run time/web server) have made possibleto run javascript on server side. JavaScript is everywhere –on Desktop/Server/Mobile.You can create mobile web app withjavascript and html5, which has lot of advantages like savelicensing cost $99 yearly to pay Apple or making IOS appsand you don’t have to purchase MAC laptop to make your IOSapp(Apple’s app can only be made in MAC). JavaScript hasstormed the web technology and nowadays small software venturesto fortune 500, all are using node js for web apps. Recentlywordpress.com has rewritten its dashboard in javascript, paypalalso 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 isquirky/dynamic/scripting/ functional oriented language, and it hasits own idiosyncrasies. It is not scalable, it is good for some3000 line of code but for a bigger app, it becomes difficult tomanage, read and debug. Also, not everyone is very much familiar toJavaScript. You might sometimes think that I do not know much of aJavaScript then “How to be JavaScript Developer without muchknowledge of JavaScript?” To ease down our work, some smartdevelopers/companies have made compiler/transpiler which convertsyour other language code into javascript code. (Best of both worlds)C++: If you know C++, then it is possible to get it converted intoJavaScript. Cheerp is a free compiler for open-source commercialprojects as well as for closed source non commercial projects.Itis the C++ compiler for the web.You just write a web applicationor port your existing one, all in C++. Cheerp will generate itsJavaScript code that can run on any browser. Java: Java is a darlingof open source, backed by Oracle /IBM/Google/Red hat. A maximum numberof 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><divclass="panel panel-default"><divclass="panel-heading"><spanclass="strong"><adata-toggle="collapse"data-parent="#accordion"href="#collapseTwo"id="aries">Python<spanclass="caret"></span></a></span></div><divid="collapseTwo"class="panel-collapse collapse"><divclass="panel-body"><p>Python is a widely used general-purpose, high level programminglanguage. It was initially designed by Guido van Rossum in 1991and developed by Python Software Foundation. It was mainly developedfor emphasis on code readability, and its syntax allows programmersto express concepts in fewer lines of code. Python is a programminglanguage that lets you work quickly and integrate systems more efficiently.There are two major Python versions- Python 2 and Python 3. Both arequite different. Beginning with Python programming: 1) Finding anInterpreter: Before we start Python programming, we need to have aninterpreter to interpret and run our programs. There are certain onlineinterpreters 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 Pythonscripts like IDLE ( Integrated Development Environment) which is installedwhen 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