JS Scroll Caja de Comentarios

JS Scroll Caja de Comentarios en NichoClean v2.0 → Responde sin perder el foco

En la plantilla NichoClean v2.0 hemos perfeccionado la experiencia de los comentarios nativos de blogger añadiendo un sistema de desplazamiento suave al responder. Este JS Scroll para la caja de comentarios garantiza una navegación fluida y profesional, alineada con el diseño minimalista y la usabilidad que caracteriza a NichoClean.

💡 ¿Qué hace el JS Scroll de la caja de comentarios?

Cuando un lector hace clic en Responder dentro de la sección de comentarios, este script detecta el evento y mueve la caja de respuesta justo debajo del comentario seleccionado. Luego realiza un scroll suave hacia el centro de la pantalla, enfocando el área de escritura sin saltos bruscos.

El resultado es una interacción más natural y ordenada, especialmente útil cuando hay muchos comentarios anidados. Esta mejora, incluida de forma nativa en NichoClean v2.0, optimiza tanto la experiencia de usuario como el rendimiento visual en Blogger.

⚙️ Beneficios de este sistema

  • Scroll suave y centrado: evita el salto brusco de pantalla al responder un comentario.
  • Organización automática: el formulario de respuesta se reubica justo debajo del comentario padre.
  • Compatible con móviles: el script adapta la posición del cuadro de respuesta en pantallas pequeñas.
  • Integrado al estilo NichoClean: conserva la estructura visual minimalista y profesional.

🧩 Código JS Scroll Caja de Comentarios

Este es el código que maneja el desplazamiento suave y la ubicación dinámica de la caja de comentarios. Está incluido por defecto en la plantilla NichoClean v2.0, pero puedes personalizarlo si lo deseas.

<!-- 3. Js SCROLL CAJA DE COMENTARIOS -->
<script>
//<![CDATA[
document.addEventListener("click", function (e) {
  // Detectar si el click fue en un botón/enlace "Responder"
  const btn = e.target.closest(".comment-reply");
  if (!btn) return;

  e.preventDefault();

  // Buscar la caja de respuesta justo en el momento del click
  const replyBox = document.querySelector(".comment-replybox-thread");
  if (!replyBox) return; // si aún no existe, no hace nada

  // Buscar el comentario padre
  const commentItem = btn.closest("li.comment");
  if (!commentItem) return;

  // Mover la caja debajo del comentario padre
  commentItem.appendChild(replyBox);

  // Asegurarse que la caja esté visible
  replyBox.style.display = "block";

  // Limpiar textarea y enfocar
  const textarea = replyBox.querySelector("textarea");
  if (textarea) {
    textarea.value = "";
    textarea.focus({ preventScroll: true }); // evita salto brusco antes del scroll suave
  }

  // Hacer scroll suave al centro de la caja de respuesta
  replyBox.scrollIntoView({ behavior: "smooth", block: "center" });
});
//]]>
</script>

🪄 Cómo funciona paso a paso

  1. El usuario hace clic en “Responder” debajo de un comentario.
  2. El script identifica automáticamente ese botón y su <li class="comment"> correspondiente.
  3. Mueve la caja de respuesta debajo de ese comentario específico, sin recargar la página.
  4. Hace un scroll suave para centrar el formulario en pantalla.
  5. El textarea se limpia y obtiene el foco, listo para escribir una respuesta.

De esta manera, cada respuesta se ubica visualmente dentro del hilo correcto, mejorando la jerarquía y legibilidad en los comentarios anidados.

🧠 Personalización y buenas prácticas

Si deseas ajustar el comportamiento, puedes editar los valores dentro del script. Por ejemplo:

  • Modificar block: "center" por "start" o "end" para cambiar la posición de scroll.
  • Agregar una pequeña animación CSS a la caja de respuesta para destacar visualmente cuando se mueve.
  • No elimines la clase .comment-replybox-thread, ya que es la que el script utiliza para identificar la caja de comentarios.
Consejo: si usas un CSS personalizado, asegúrate de mantener visibles las clases .comment-reply y .comment, ya que el JavaScript las usa como referencias para mover la caja correctamente.

📋 Instalación manual (solo si la plantilla no la incluye)

Si estás usando una versión anterior de NichoClean o una plantilla personalizada, puedes agregar este código de forma manual:

  1. Abre tu panel de Blogger → Tema → Editar HTML.
  2. Desplázate hasta justo antes de la etiqueta </body>.
  3. Pega el bloque de código mostrado arriba.
  4. Guarda los cambios y prueba la sección de comentarios.
Recuerda limpiar la caché del navegador si los cambios no se reflejan inmediatamente.

✅ Conclusión

El JS Scroll de la caja de comentarios es una mejora discreta pero poderosa dentro de NichoClean v2.0. Con un toque de suavidad y enfoque visual, transforma la forma en que los lectores interactúan con tus artículos y mantiene tu sección de comentarios organizada, moderna y coherente con el diseño general del blog.

Recuerda: pequeñas mejoras de usabilidad generan grandes resultados en la retención de lectores y en la percepción de profesionalismo de tu sitio.

NichoClean v2.0 continúa demostrando que el detalle importa — cada interacción cuenta, y cada línea de código mejora tu experiencia en Blogger.