0

el caso es que tengo una SPA en la que funciono con anclas y va de lujo, pero la politica de privacidad por ejemplo la tengo en otra pagina aparte, para consultarla y eso, la cosa es que la plantilla es la misma y quiero que estando en la pagina privacidad, si haces click en el menu en horarios se vaya a la seccion horarios de la pagina principal... y no se va.

Enlaces pagina de privacidad:

                    <li class="active">
                        <a href="index.php">Inicio</a>
                    </li>
                    <li><a href="index.php#horarios">Horario</a></li>
                    <li><a href="#alquiler">Presupuestos</a></li>
                    <li><a href="#flota">Nuestra Flota</a></li>
                    <li><a href="about.html">Sobre Nosotros</a></li>
                    <li><a href="sugerencias.php">Sugerencias</a></li>
                    <li><a href="">Noticias</a></li>

                    <!-- <li><a href="booking.html">Book Online</a></li> -->
                </ul>

Enlaces pagina principal que si funcionan, haces la animacion y tal:

                <ul class="site-menu js-clone-nav mx-auto d-none d-lg-block">
                    <li class="active">
                        <a href="index.php">Inicio</a>
                    </li>
                    <li><a href="#horarios">Horario</a></li>
                    <li><a href="#servicios">Servicios</a></li>
                    <li><a href="#alquiler">Presupuestos</a></li>
                    <li><a href="#flota">Nuestra Flota</a></li>
                    <li><a href="sugerencias.php">Sugerencias</a></li>
                    <li><a href="">Noticias</a></li>

                    <!-- <li><a href="booking.html">Book Online</a></li> -->
                </ul>

Añado la funcion de animacion por si tiene algo que ver:

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault()

    $('html, body').animate(
        {
            scrollTop: $($(this).attr('href')).offset().top,
        },
        500,
        'linear'
    )
})
$(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
        $('a.scroll-top').fadeIn('slow');
    } else {
        $('a.scroll-top').fadeOut('slow');
    }
});
$('a.scroll-top').click(function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: 0}, 600);
});

6
  • booking.html esta en el mismo directorio de que la pagina de privacidad? el 12 jul. 2019 a las 16:25
  • booking.html esta comentado , porque no se si lo are funcionar o no al final
    – KeTeMeTo
    el 12 jul. 2019 a las 16:41
  • es que no comprendo que es lo que no te funciona, las anclas te serviran en la misma pagina si vas a otra y los usas tendras que hacer referencia a la pagina donde quieres ir mas la ancla el 12 jul. 2019 a las 16:43
  • claro uso <li><a href="index.php#horarios">Horario</a></li> y no me va ni a index.php ni al #horarios
    – KeTeMeTo
    el 12 jul. 2019 a las 16:51
  • y el index esta en el mismo directorio que la de privacidad? el 12 jul. 2019 a las 16:56

1 respuesta 1

1

El problema es en tu selector, usa este:

$('a[href^="#"]').on('click') ....

Ya que el efecto animate solo aplica a contenido dentro de la misma pagina.

$('a[href*="#"]') //Contiene # dentro de la url
$('a[href!="#"]') //No contiene # dentro de la url
$('a[href^="#"]') //La url empieza con #
$('a[href$="#"]') //La url termina con #

Valga la redundancia, como tu animate solo aplica a urls que sea dentro de la misma pagina e inicia con # lo que aplica es $('a[href^="#"]')

No aplica para urls fuera porque no puede detectar lo valores de ventana a una ventana no renderizada, refiriendome a este codigo $($(this).attr('href')).offset().top

Lanzaria este error: Cannot read property 'top' of undefined

$(document).ready(function(){
$('a[href^="#"]').on('click', function (e) {
        e.preventDefault()

        $('html, body').animate(
            {
                scrollTop: $($(this).attr('href')).offset().top,
            },
            500,
            'linear'
        )
    })
    $(window).scroll(function() {
        if ($(this).scrollTop() > 300) {
            $('a.scroll-top').fadeIn('slow');
        } else {
            $('a.scroll-top').fadeOut('slow');
        }
    });
    $('a.scroll-top').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, 600);
    });
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="site-menu js-clone-nav mx-auto d-none d-lg-block">
                    <li class="active">
                        <a href="index.php">Inicio</a>
                    </li>
                    <li><a href="index.php#horarios">Horario</a></li>
                    <li><a href="#servicios">Servicios</a></li>
                    <li><a href="#alquiler">Presupuestos</a></li>
                    <li><a href="#flota">Nuestra Flota</a></li>
                    <li><a href="sugerencias.php">Sugerencias</a></li>
                    <li><a href="">Noticias</a></li>

                    <!-- <li><a href="booking.html">Book Online</a></li> -->
                </ul>

3
  • entoces no lo puedo hacer no?
    – KeTeMeTo
    el 12 jul. 2019 a las 17:00
  • Claro que si solo cambia eso que te dije. Ahi te cree completo para que veas.
    – oegpyg
    el 12 jul. 2019 a las 17:03
  • Perfecto ahora funciona genial muchas gracias
    – KeTeMeTo
    el 12 jul. 2019 a las 17:06

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.