jQuery: trucos rápidos (scroll, formularios y WordPress)

Tres trucos de jQuery que uso a menudo: desplazar el scroll hasta un elemento, vaciar un formulario y actualizar la versión de jQuery de WordPress.

Desplazar el scroll hasta un elemento con jQuery

El desplazamiento automático mejora la experiencia de usuario en landing pages o menús de navegación. Con jQuery controlas la velocidad y el destino exacto:

$("#miBoton").on("click", function (e) {
    e.preventDefault(); // Evita el comportamiento por defecto del enlace

    // Animamos el scroll hacia el elemento deseado
    $('html, body').animate({
        scrollTop: $("#scrollToHere").offset().top
    }, 1000); // 1000 ms para mejor fluidez
});

• .on("click"): la forma moderna de asignar eventos en jQuery.
• offset().top: distancia del elemento #scrollToHere respecto al inicio de la página.
• 1000: milisegundos. 2000 ms suele ser demasiado lento; 800 o 1000 ms es lo habitual.

Vaciar un formulario con jQuery (clearForm)

Función para borrar el contenido de un formulario. La encontré en Internet y la mejoré para los select múltiples y para campos que están dentro de un div en lugar de un formulario.

/*
 * Funcion limpiar un formulario hacer un reset
 * Ej: $(".evalFormadd").clearForm(); si el contenido esta dentro de un formulario
 * Ej: $(".evalFormadd").clearForm('div'); si el contenido esta dentro de un div
 */
$.fn.clearForm = function(tag1) {
    tag1 = tag1 || 'form';
    return this.each(function() {
        var type = this.type, tag = this.tagName.toLowerCase();
        if (tag == tag1)
            return $(':input',this).clearForm();
        if (type == 'text' || type == 'password' || type == 'hidden' || tag == 'textarea')
            this.value = '';
        else if (type == 'checkbox' || type == 'radio')
            this.checked = false;
        else if (tag == 'select'){
            if (this.getAttribute("multiple") == null) {
                this.selectedIndex = 0;
            }else{
                this.value = '';
            }
        }
    });
}

Actualizar jQuery en WordPress

WordPress ya incluye jQuery 3.x, así que solo actualízalo si de verdad lo necesitas: algunos plugins y temas antiguos pueden dejar de funcionar. Hay dos formas.

Con un plugin (lo más sencillo). En Plugins → Añadir nuevo busca jQuery Updater, instálalo y actívalo: mantiene la última versión estable sin más pasos.

A mano, sin tocar el núcleo. No modifiques /wp-includes/: tus cambios se borran al actualizar WordPress. Descarga la última versión desde jquery.com, súbela a la carpeta de tu tema (por ejemplo /wp-content/themes/tu-tema/js/jquery.min.js) y añade esto a functions.php:

function tsa_actualizar_jquery() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', false, '3.7.1');
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'tsa_actualizar_jquery');