5eje

Aquí tienes el código completo con documentación exhaustiva línea por línea en el CSS, más una explicación detallada de su funcionamiento y una guía de aprendizaje.

📚 Explicación detallada de cómo funciona

Mecanismo principal: Navegación por anclas con scroll suave

Estructura de dos columnas:
- .contenedor-flex con display: flex crea dos áreas: menú lateral izquierdo (.menu-lateral) y zona de contenido (.contenedor-centrado).
Scroll restringido al contenido:
- .contenedor-centrado tiene overflow-y: auto, lo que significa que solo esta caja tendrá scroll cuando el contenido exceda su altura.
- El menú lateral no tiene scroll impuesto (excepto si pusieras overflow-y: auto), por lo que nunca se desplaza.
El truco de las anclas (IDs):
- Cada título <h2> tiene un id único: js-intro, js-sintaxis, etc.
- Los enlaces del menú tienen href="#js-intro", href="#js-sintaxis", etc.
- Cuando haces clic, el navegador busca el elemento con ese ID y lo lleva a la parte visible del contenedor con scroll (.contenedor-centrado).
Scroll suave:
- scroll-behavior: smooth en .contenedor-centrado hace que el desplazamiento sea animado en lugar de instantáneo.
¿Por qué no se mueve el menú lateral?
- Porque el menú lateral está fuera del contenedor con scroll. El scroll ocurre solo dentro de .contenedor-centrado, que es un hermano del menú, no su padre.

🧠 ¿Cómo aprender y memorizar esta técnica?

1. Aprende los conceptos fundamentales por separado

Concepto	Qué es	Por qué es importante aquí
Flexbox	`display: flex` para layouts flexibles	Divide pantalla en dos columnas
Overflow	`overflow-y: auto` crea scroll si el contenido desborda	Limita el scroll solo al área deseada
Anclas (IDs)	Enlaces con `#id` que apuntan a elementos con `id="..."`	Permiten saltar a secciones específicas
scroll-behavior	Propiedad CSS para animar desplazamientos	Da la experiencia suave al usuario

2. Desglosa el código en pasos para recordarlo

Paso 1 - Estructura base:

<div class="contenedor-flex">
    <div class="menu-lateral">...</div>
    <div class="contenedor-centrado">...</div>
</div>

Paso 2 - CSS clave para el scroll:

.contenedor-centrado {
    overflow-y: auto;           /* Solo esta caja tiene scroll */
    scroll-behavior: smooth;    /* Animación suave */
}

Paso 3 - Anclas:

<!-- Enlace -->
<a href="#seccion1">Ir a sección 1</a>

<!-- Destino -->
<h2 id="seccion1">Sección 1</h2>

3. Técnicas de memorización (¡compruébalas!)

🔁 Método de repetición espaciada

Día 1: Copia el código a mano (no copiar/pegar) y haz que funcione.
Día 3: Reconstruye solo con HTML vacío y añade CSS de memoria.
Día 7: Explícaselo a alguien (o grábate explicándolo).
Día 14: Crea una página diferente (ej: tutorial de CSS con la misma navegación).

🧩 Asociación con imágenes mentales

Imagina el menú lateral como un índice de libro pegado a la izquierda (nunca se mueve).
Imagina el contenedor-centrado como una pantalla de teléfono con scroll.
Los anclas son como marcadores que hacen que la pantalla se deslice suavemente.

📝 Regla mnemotécnica (FOSA)

Flexbox → divide pantalla (menú + contenido)
Overflow → scroll solo en el contenido
Smooth → animación agradable
Anclas (#id) → puntos de destino

"FOSA: sin FOSA el menú se movería con el scroll"

🛠️ Proyecto mínimo para practicar

Crea este mini ejercicio en 5 minutos:

<!-- Copia esto en un archivo .html -->
<div style="display: flex; height: 200px;">
    <div style="width: 100px; background: #ddd;">
        <a href="#destino">Ir</a>
    </div>
    <div style="overflow-y: auto; scroll-behavior: smooth;">
        <div style="height: 500px;">Scrollea</div>
        <div id="destino" style="background: yellow;">¡Destino!</div>
    </div>
</div>

Este mini ejemplo tiene exactamente la misma mecánica pero reducida al mínimo. Una vez que entiendas esto, el código grande es solo añadir estilos bonitos.

4. Errores comunes que aprenderás a evitar (y recordarás)

❌ Poner scroll-behavior: smooth en html o body → Eso haría scroll en toda la página y movería el menú lateral también.
✅ Siempre en el contenedor que tiene overflow-y: auto.

❌ Olvidar min-height: 0 en el padre flex → El contenido puede desbordarse y romper el layout.
✅ Añádelo siempre: .contenedor-flex { min-height: 0; }

❌ Poner IDs duplicados → El navegador solo reconoce el primero.
✅ Cada ID debe ser único.

5. Analogía para explicarlo a un niño (y que lo recuerdes)

Imagina que tienes un libro gigante (toda la página web).
El índice (menú lateral) está pegado al borde izquierdo del libro y no se mueve nunca.
El contenido (.contenedor-centrado) es como una lupa que puedes deslizar hacia arriba y abajo sobre las páginas del libro.
Los números de página (anclas #id) son marcas en el libro. Cuando tocas una en el índice, la lupa se desliza suavemente hasta esa marca, pero el índice sigue quieto.

📌 Resumen rápido para repasar antes de dormir

.contenedor-flex { display: flex; min-height: 0; }
.contenedor-centrado { 
    overflow-y: auto;        /* scroll solo aquí */
    scroll-behavior: smooth; /* desplazamiento suave */
}
.menu-lateral { 
    flex-shrink: 0;          /* no encoger */
}

<a href="#mi-id">Texto</a>
<h2 id="mi-id">Título</h2>

¡Con práctica diaria en menos de una semana lo tendrás memorizado y podrás implementarlo sin pensar! 🚀

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">                               <!-- Define la codificación UTF-8 para soportar caracteres especiales -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace que la página sea responsive en dispositivos móviles -->
    <title>Tutorial de JavaScript · Navegación por anclas</title> <!-- Título que aparece en la pestaña del navegador -->
    
    <style>
        /* =============================================== */
        /* DOCUMENTACIÓN COMPLETA LÍNEA POR LÍNEA - CSS    */
        /* =============================================== */
        
        /* ---------- RESET BÁSICO (elimina márgenes y ajusta modelo de caja) ---------- */
        * {
            margin: 0;              /* Elimina todos los márgenes externos por defecto de todos los elementos */
            padding: 0;            /* Elimina todos los rellenos internos por defecto de todos los elementos */
            box-sizing: border-box; /* Hace que el ancho/alto incluyan padding y borde, no solo el contenido */
        }

        /* ---------- ESTILOS DEL CUERPO PRINCIPAL ---------- */
        body {
            margin: 0;                     /* Sin margen exterior para que ocupe toda la pantalla */
            font-family: Arial, Helvetica, sans-serif; /* Fuente genérica legible */
            height: 100vh;                 /* Altura total del viewport (100% de la ventana) */
            display: flex;                 /* Activa flexbox para organizar los hijos verticalmente */
            flex-direction: column;        /* Coloca los elementos en columna (uno debajo del otro) */
            background: #fff;              /* Fondo blanco para mejor contraste */
        }

        /* ===== MENÚ SUPERIOR (barra de navegación horizontal básica) ===== */
        .menu-superior {
            background-color: #333;        /* Fondo oscuro para destacar el menú */
        }
        
        .menu-superior a {
            color: white;                  /* Texto blanco para contraste con fondo oscuro */
            text-decoration: none;         /* Elimina el subrayado de los enlaces */
            padding: 12px 15px;            /* Espaciado interno: arriba/abajo 12px, izquierda/derecha 15px */
            display: inline-block;         /* Permite aplicar padding y margin como bloque, pero en línea horizontal */
            font-size: 14px;               /* Tamaño de letra pequeño pero legible */
        }
        
        .menu-superior a:hover {
            background-color: #555;        /* Cambia a gris más claro al pasar el mouse (efecto visual) */
        }
        
        .menu-superior a.activo {
            background-color: #007bff;     /* Resalta el enlace activo (página actual) con azul */
        }

        /* ===== CONTENEDOR FLEX PRINCIPAL: divide la pantalla en menú lateral + zona de contenido ===== */
        .contenedor-flex {
            display: flex;                 /* Activa flexbox para sus hijos directos (.menu-lateral y .contenedor-centrado) */
            flex: 1;                      /* Ocupa todo el espacio restante después del menú superior */
            min-height: 0;                /* Crucial para permitir scroll: evita que el contenido desborde su contenedor */
                                          /* Sin esto, el contenido grande rompería el diseño flex */
        }

        /* ===== MENÚ LATERAL (fijo visualmente, no se desplaza al hacer clic) ===== */
        .menu-lateral {
            width: 190px;                  /* Ancho fijo para el menú lateral */
            background-color: #f5f5f5;     /* Fondo gris muy claro para diferenciarlo del contenido */
            padding: 12px 10px;            /* Relleno interno (arriba/abajo 12px, laterales 10px) */
            overflow-y: auto;              /* Si hay muchos temas, aparece scroll vertical propio (independiente) */
            flex-shrink: 0;                /* Evita que el menú se encoja si la pantalla es muy pequeña */
            border-right: 1px solid #ddd;  /* Línea divisoria sutil entre menú y contenido */
        }
        
        .menu-lateral h3 {
            margin-top: 0;                 /* Sin margen superior para que quede pegado arriba */
            margin-bottom: 12px;           /* Separación inferior con respecto a los enlaces */
            font-size: 1.1rem;             /* Tamaño relativo ligeramente mayor al base */
            color: #222;                   /* Gris muy oscuro casi negro */
            border-left: 3px solid #007bff; /* Borde izquierdo azul para destacar el título */
            padding-left: 8px;             /* Separación del texto respecto al borde azul */
        }
        
        .menu-lateral a {
            display: block;                /* Cada enlace ocupa toda la línea (apilados verticalmente) */
            padding: 7px 8px;              /* Espaciado interno cómodo para hacer clic */
            margin: 4px 0;                 /* Separación vertical entre enlaces */
            color: #1a1a2e;                /* Color azul oscuro elegante */
            text-decoration: none;         /* Sin subrayado por defecto */
            font-size: 14px;               /* Texto compacto pero legible */
            border-left: 2px solid transparent; /* Borde izquierdo invisible (reservado para hover) */
            transition: 0.1s linear;       /* Transición rápida al cambiar propiedades (hover) */
        }
        
        .menu-lateral a:hover {
            background-color: #e0e0e0;     /* Fondo gris claro al pasar el mouse */
            border-left-color: #007bff;     /* Aparece borde azul a la izquierda como indicador visual */
            color: #000;                   /* Texto completamente negro al hacer hover */
        }

        /* ===== ZONA CENTRAL (contenido que se desplaza suavemente) ===== */
        /* ¡ESTA ES LA CLAVE DEL EFECTO! */
        .contenedor-centrado {
            flex: 1;                       /* Ocupa todo el espacio restante a la derecha del menú lateral */
            padding: 20px 25px;            /* Espacio interno alrededor del contenido */
            overflow-y: auto;              /* Scroll vertical interno: permite desplazarse por el contenido LARGO */
            scroll-behavior: smooth;       /* !!EFECTO PRINCIPAL!! Hace que el scroll sea suave y animado al navegar */
                                           /* Al hacer clic en un enlace del menú, el desplazamiento hacia el ID será animado */
        }

        /* Contenido con ancho cómodo para lectura (centrado horizontalmente dentro de .contenedor-centrado) */
        .contenido {
            max-width: 800px;              /* Ancho máximo para líneas de texto no demasiado largas (legibilidad) */
            margin: 0 auto;                /* Centrado horizontal automático */
            font-size: 18px;               /* Tamaño base de texto cómodo para lectura */
            line-height: 1.5;              /* Interlineado amplio (1.5 veces el tamaño de fuente) mejora lectura */
        }

        /* ---------- ESTILOS TIPOGRÁFICOS BÁSICOS ---------- */
        h1 {
            font-size: 2rem;               /* Tamaño grande (2x el tamaño base) */
            margin-bottom: 20px;           /* Separación inferior respecto al siguiente elemento */
            color: #111;                   /* Casi negro */
        }
        
        h2 {
            margin-top: 36px;              /* Espacio superior grande para separar secciones */
            margin-bottom: 12px;           /* Espacio inferior moderado */
            padding-bottom: 6px;           /* Relleno inferior antes del borde */
            border-bottom: 2px solid #007bff; /* Línea azul debajo del título (efecto decorativo) */
            color: #0a2b3e;                /* Azul muy oscuro */
            font-size: 1.6rem;             /* Tamaño grande pero menor que h1 */
        }
        
        h2:first-of-type {
            margin-top: 0;                 /* El primer h2 no tiene margen superior (pega al título principal) */
        }
        
        p {
            margin-bottom: 1rem;           /* Separación inferior entre párrafos (1rem = tamaño de fuente actual) */
        }
        
        code {
            background-color: #f0f0f0;     /* Fondo gris claro para destacar código en línea */
            padding: 2px 5px;              /* Relleno pequeño alrededor del código */
            border-radius: 4px;            /* Bordes ligeramente redondeados */
            font-family: 'Courier New', monospace; /* Fuente monoespaciada típica para código */
            font-size: 0.9em;              /* Ligeramente más pequeño que el texto normal */
        }
        
        pre {
            background-color: #f6f8fa;     /* Fondo gris azulado suave para bloques de código */
            padding: 12px;                 /* Espacio interior amplio */
            border-radius: 8px;            /* Bordes redondeados más pronunciados */
            overflow-x: auto;              /* Scroll horizontal si el código es muy ancho */
            font-family: 'Courier New', monospace;
            font-size: 14px;
            border: 1px solid #ddd;        /* Borde sutil alrededor del bloque */
            margin: 16px 0;                /* Separación vertical con respecto a otros elementos */
        }
        
        strong {
            color: #0056b3;                /* Azul oscuro para destacar texto importante */
        }
    </style>
</head>
<body>

    <!-- BARRA SUPERIOR: navegación principal irrelevante para el efecto de anclas -->
    <div class="menu-superior">
        <a href="js.html" class="activo">JavaScript</a>  <!-- Enlace simulado (no funcional en este demo) -->
    </div>

    <!-- CONTENEDOR FLEX: estructura clave de dos columnas -->
    <div class="contenedor-flex">
        
        <!-- MENÚ LATERAL: cada enlace apunta a un ID de una sección (anclas) -->
        <div class="menu-lateral">
            <h3>Temas de JavaScript</h3>
            <!-- Los atributos href="#..." son anclas que apuntan a elementos con ese mismo ID dentro del documento -->
            <a href="#js-intro">📘 Introducción a JS</a>
            <a href="#js-sintaxis">✍️ Sintaxis Básica</a>
            <a href="#js-variables">📦 Variables y Tipos</a>
            <a href="#js-funciones">⚙️ Funciones en JS</a>
            <a href="#js-objetos">🧩 Objetos y Arrays</a>
            <a href="#js-dom">🌿 Manipulación del DOM</a>
        </div>

        <!-- ZONA CENTRAL: aquí ocurre el desplazamiento suave. 
             El scroll-behavior: smooth hace que al hacer clic en cualquier enlace que apunte a #id,
             el navegador desplace suavemente esta caja (no toda la página) porque el overflow-y está aquí. -->
        <div class="contenedor-centrado">
            <div class="contenido">
                <h1>Tutorial de JavaScript</h1>

                <!-- CADA SECCIÓN TIENE UN ID ÚNICO al que apuntan los enlaces del menú -->
                <h2 id="js-intro">📖 Introducción a JavaScript</h2>
                <p>JavaScript es un lenguaje de programación interpretado, orientado a objetos, utilizado principalmente en el lado del cliente (navegador web).</p>
                <p>Creado por Brendan Eich en 1995, JavaScript permite crear páginas web interactivas y dinámicas.</p>
                <p><strong>Dato:</strong> No debe confundirse con Java — son lenguajes completamente diferentes.</p>

                <h2 id="js-sintaxis">📐 Sintaxis Básica</h2>
                <p>JavaScript usa una sintaxis similar a C. Las sentencias terminan con punto y coma (opcional pero recomendado).</p>
                <p><strong>Ejemplo:</strong> <code>console.log("Hola Mundo");</code></p>
                <p>Los comentarios pueden ser de una línea (<code>//</code>) o múltiples líneas (<code>/* ... */</code>).</p>
                <pre>// Esto es un comentario
let saludo = "Hola";
console.log(saludo);</pre>

                <h2 id="js-variables">🏷️ Variables y Tipos de Datos</h2>
                <p>En JavaScript moderno se usa <code>let</code> y <code>const</code> para declarar variables. <code>var</code> es la forma antigua.</p>
                <p><strong>Tipos primitivos:</strong> number, string, boolean, undefined, null, symbol, bigint.</p>
                <p><strong>Ejemplo:</strong></p>
                <pre><code>let nombre = "Ana";
const edad = 30;
let esEstudiante = true;
let colores = ["rojo", "azul", "verde"];</code></pre>

                <h2 id="js-funciones">⚡ Funciones en JavaScript</h2>
                <p>Las funciones se pueden declarar de varias formas:</p>
                <p><strong>Declaración de función:</strong></p>
                <pre><code>function suma(a, b) {
    return a + b;
}</code></pre>
                <p><strong>Función flecha (arrow function):</strong> <code>const resta = (a, b) => a - b;</code></p>
                <pre><code>const multiplicar = (x, y) => x * y;
console.log(multiplicar(4, 5)); // 20</code></pre>

                <h2 id="js-objetos">🧰 Objetos y Arrays</h2>
                <p><strong>Objetos:</strong> colecciones de propiedades clave-valor.</p>
                <pre><code>let persona = {
    nombre: "Juan",
    edad: 25,
    saludar: function() {
        return "Hola, soy " + this.nombre;
    }
};</code></pre>
                <p><strong>Arrays:</strong> listas ordenadas, pueden contener cualquier tipo.</p>
                <pre><code>let frutas = ["manzana", "banana", "naranja"];
frutas.push("uva");   // Añadir elemento
console.log(frutas[0]); // "manzana"</code></pre>

                <h2 id="js-dom">🖱️ Manipulación del DOM</h2>
                <p>JavaScript puede manipular el DOM (Document Object Model) para cambiar dinámicamente el contenido de la página.</p>
                <p><strong>Ejemplos comunes:</strong></p>
                <pre><code>// Seleccionar elementos
document.getElementById("miId");
document.querySelector(".miClase");

// Modificar contenido
elemento.textContent = "Nuevo texto";
elemento.innerHTML = "&lt;b&gt;Texto en negrita&lt;/b&gt;";

// Eventos
boton.addEventListener("click", function() {
    alert("¡Hiciste clic!");
});</code></pre>
                <p>✅ <strong>Comportamiento asegurado:</strong> Al hacer clic en cualquier enlace del menú lateral, el área de <strong>contenido se desplaza suavemente</strong> hacia la sección elegida. El menú lateral permanece fijo en su lugar (no se mueve).</p>
            </div>
        </div>
    </div>

    <!-- NOTA TÉCNICA: 
         No se necesita JavaScript adicional porque el desplazamiento suave se logra con CSS:
         - scroll-behavior: smooth en .contenedor-centrado
         - Los enlaces del menú lateral apuntan a IDs internos (ej: href="#js-intro")
         - El contenedor .contenedor-centrado tiene overflow-y: auto, limitando el scroll a esa caja.
         - El menú lateral no tiene scroll forzado (excepto si hay overflow propio) y nunca se mueve.
         
         ¿POR QUÉ FUNCIONA?
         Cuando haces clic en un enlace con ancla (#id), el navegador intenta llevar ese elemento a la vista.
         Si ese elemento está dentro de un contenedor con scroll (overflow-y: auto), el scroll ocurre DENTRO de ese contenedor.
         Como .contenedor-centrado es quien tiene el scroll, el menú lateral permanece estático. 
         La propiedad scroll-behavior: smooth añade la animación. 
    -->
</body>
</html>

Buscar este blog

css-grid