entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

CSS Simular anclaje

Hola,

Dentro de una página se puede hacer que cierta parte de la página quede arriba, usando anclas, así cuando el usuario clicka en el enlace automáticamente se le carga arriba ese punto anclado, ahora bien cuando una página se carga dentro de un div contenedor, aunque esta página cargue puntos anclados, estos nunca van aparecer, más arriba del div que los contiene.

¿Hay alguna propiedad en CSS con Translate u otra propiedad que cargue el navegador con el punto del anclaje arriba del scroll y que para ver lo que hay encima se tenga que hacer scoll?

Para entendernos mejor, imaginad que hay una pagina con una cabecera y un menú y debajo del menú hay un div que carga dinamicamente el contenido, y que las página que enlace tengan un ancla que lo que hace es ocultar la cabecera y el menu, más arriba y muestre arriba del todo el punto anclado.

Saludos

1 Respuesta

2votos

Leonardo-Tadei Puntos227320

Hola @bichomen,

si no entiendo mal lo que querés hacer, bastaría que la página tuviera un ancla al principio, otra debajo del menú, y que el contenido cargado en el DIV apunte a las anclas que están afuera.

Al cargar las cosas en un DIV, tenés que toda la página es un solo documento, por lo que no hay restricciones para disparar un ancla que esté afuera, siempre y cuando esté previamente definida.

(eso no funciona si lo que hay adentro de la página es un IFRAME, porque los marcos son, en realidad, otro árbol de documentos y enlazar al contenedor implica recargar la página)

Saludos cordiales!

1voto

bichomen comentado

Hola @Leonardo-Tadei

No, es un iframe, se carga el contenido con includes de PHP.

Lo que no entiendo es lo del ancla al inicio ¿Puedes ponerme un ejemplo practico?

Gracias

2votos

Leonardo-Tadei comentado

Me refiero a esto:

<body>
  <span id="top"></span>
  <div>... cabecera del sitio ...</div>
  <span id="menu"></span>
  <div>... menu ...</div>
  ...
  <div>
    el contenido cargado dinámicamente
    <a href="#top">ir arriba</a>
    más contenido
    <a href="#menu">ir al menu</a>
    sigue el contendido
  </div>
  ...
</body>

No me queda claro tu comentario: un include() de PHP no tiene por qué estar dentro de un IFRAME... podrías poner el código HTML generado en algún lugar para verlo?

1voto

bichomen comentado

Hola @Leonardo-Tadei

Exacto, en include no carga en un un iframe sino en un div, pero lo que estoy viendo de tu código no es lo que yo busco, siguiendo tu codigo te pongo un ejemplo

<body>  
  <div>... cabecera del sitio ...</div> <--- Se carga con un include

  <div>... menu ...</div> <--- Se carga con un include, sus enlaces son los que cagan el contenido en el div contenedor

  <div id="contenedor"> 
    el contenido cargado dinámicamente </div><--- Donde se cargan los enlaces también a través de un include  
</body>

Entonces los enlaces dentro del menú serian del estilo:

<a href="pagina.php#top">pagina.php</a>

y dentro de la pagina cargada:

<div id="top"> Contenido </div>

Pongo 2 imágenes a modo de ejemplo:

Imagen 1:

Imagen 1

Imagen 2:

Imagen 2

En la primera imagen el menú estaría primero y luego la cabecera (Aprende Bootstrap 3 y CodeIgniter) y debajo el contenido (¿Qué voy aprender?).

Pues lo que busco es que cuando se presione un enlace en el menú (Por ejemplo "Accede") se carge el contenido y se muestre la página tal y como se ve en la segunda imagen, con el contenido arriba y si te fijas el scroll, no esta arriba, porque arriba estaría escondido el menú y la cabecera.

Ese es el efecto que busco.

PD: Bueno en el ejemplo que he puesto, se sigue viendo el menú, pero en mi caso también quedaría escondido.

0voto

Leonardo-Tadei comentado

Si no te entiendo mal, este ejemplo hace lo que querés:

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.24.1" />
    <!-- Estilo puesto acá para tener todo junto -->
    <style>
        #menu{
            height: 20px;
            padding: 6px;
            background-color:yellow;
        }
        #header{
            padding: 10px;
            text-align: center;
            background-color:silver;
        }
    </style>
</head>

<body>
    <div id="menu">
        opcion 1 | <a href="#contenido">opción 2</a> | opción 3
    </div>
    <div id="header">
        La cabecera de la página<br>
        La cabecera de la página<br>
        La cabecera de la página<br>
        La cabecera de la página<br>
        La cabecera de la página<br>
        La cabecera de la página<br>
        La cabecera de la página<br>
    </div>
    <div id="contenido">
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>    
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        Este es el contenido<br>
        <a href="#menu">subir</a>
    </div>
</body>
</html>

0voto

bichomen comentado

No no, el ejemplo que tu pones es para subir desde abajo a arriba, yo no busco eso, yo quiero que cuando se clicke un enlace en el menú este cargue el contenido, pero situé el scroll vertical de tal manera que quede escondido el menú y la cabecera arriba, como muestra la imagen 2:

Imagen 2

Ya digo que es posible que esto no se pueda hacer.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta