Creé una página HTML que tiene 4 secciones.

En la sección más superior, hay un formulario con un campo de entrada y un botón.

Una vez que el usuario escribe su nombre y hace clic en el botón, se utiliza alguna consulta ajax para obtener datos y completar una cuadrícula en la segunda sección.

Mi objetivo es realizar ambas cosas: consultar ajax + desplazarme a la sección 2.

Sin embargo, solo hace uno de ellos por alguna razón (o elimino id="process_input" y luego se desplaza pero no muestra ningún resultado o lo elimino y luego muestra resultados pero no se desplaza).

Mi código es ( python ):

 @app.route("/") def run(): return render_template("main_layout.html") @app.route('/_background_hiscore_process') def _background_hiscore_process(): try: username = request.args.get('username', 0, type = str) hiscore_data = read_hiscore(username) return jsonify(result = hiscore_data) except Exception as e: return str(e)

HTML: (una vez que se hace clic en el botón, debe desplazarse a la segunda sección llamada "habilidades")

 <form class="hiscore_query"> <input type="text" placeholder="username" name="username" id="username" autocomplete="off"> <a href="#skills" id="process_input"><button><i class="fa fa-search"></i></button></a> </form>

y el AJAX es:

 $(function () { $('a#process_input').bind('click', function () { $.getJSON('/_background_hiscore_process', { username: $('input[name="username"]').val(), }, function (data) { for (const key in data.result){ console.log("TEST :" + key) $("#" + key + "_rank").text("Current rank: " + data.result[key][0]); $("#" + key + "_lvl").text("Current level: " + data.result[key][1]); $("#" + key + "_xp").text("Current XP: " + data.result[key][2]); } }); return false; }); });

En todas mis otras secciones/barra de navegación, uso la biblioteca de desplazamiento suave desde aquí, que funciona bien en todos los demás casos: enlace .

 <script> var scroll = new SmoothScroll('a[href*="#"]'); </script>

Gracias