$(document).ready(function() { $(".button1").click(function() { $("html, body").animate({ scrollTop : $("#screen1").offset().top }, 800); }); }) $(document).ready(function() { $(".button2").click(function() { $("html, body").animate({ scrollTop : $("#screen2").offset().top }, 800); }); }) ...and so onEscribí el código anterior en javascript. Si se hace clic en el botón, se desplaza a la posición de #pantalla. Sin embargo, tengo varios ".button"s y "#screen"s que básicamente tienen la misma función. No quiero repetir el mismo código, así que lo intenté en la declaración, pero no pude hacerlo bien. ¿De qué manera puedo evitar repetir códigos en esta situación?
Ahora, no puedo ver su código HTML, pero mi sugerencia sería agregar el detector de eventos a un elemento principal para todos los botones y luego agregar información sobre el botón en el botón mismo. Aquí estoy usando la data-screen atributo para guardar información sobre la "pantalla".
ACTUALIZAR
Refiné un poco el jquery. Usar on() en lugar de click() para poder eliminar la instrucción if original. Cuando el detector de eventos está en el elemento principal, se pueden agregar más botones dinámicamente y funcionarán como se esperaba.
$(document).ready(function() { $("#buttons").on("click", "button", function(e) { var screenid = $(e.target).attr('data-screen'); $("html, body").animate({ scrollTop: $(`#screen${screenid}`).offset().top; }, 800); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="buttons"> <button data-screen="1">Button 1</button> <button data-screen="2">Button 2</button> <button data-screen="3">Button 3</button> </div> <div> <div id="screen1"></div> <div id="screen2"></div> <div id="screen3"></div> </div>Suponiendo que todos los botones y pantallas sigan la convención de nomenclatura .button${number} y #screen${number} , puede hacer esto:
const numberOfSections = 5; $(document).ready(function() { for (let i = 1; i <= numberOfSections ; i++) { $(`.button${i}`).click(function() { $("html, body").animate({ scrollTop : $(`#screen${i}`).offset().top }, 800); }); } });