El enlace de anclaje va a la página no encontrada en lugar de la sección dentro de la misma página

Question

Tengo un marcado en el que cuando un usuario hace clic en "buscar un piloto", se supone que el navegador lleva al usuario a donde están los participantes en la misma página. Pero al hacer clic en el enlace, me lleva a una página que no se encuentra en Chrome, Edge y Firefox (no se puede probar el safari).

<div class="container-fluid blue">
    <div class="container text-center">
        <h1 class="white">Prairie Women on Snowmobiles</h1>
        <a href="#find" class="btn white main-cta elevation-z12" style="margin-bottom: 60px;">Find a Rider</a>
        <div class="row">
            <div class="col-lg-12" style="margin-bottom: 15px;">
                <div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="text-center">Prairie Women on Snowmobiles</h2>
            <p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles <a href="../site/SPageServer/?pagename=PWOS_SK_About">click here</a>.</p>
        </div>
    </div>
    <div class="container">
        <div class="text-center">
            <h2>Riders</h2>
            <p>Meet our 2020 Riders</p>
        </div>
        <div class="events">
            <div class="event-display" id="find">
                [[S51:PWOS_SK_reus_riders]]
            </div>
        </div>
    </div>
</div>

Normalmente para solucionar esto, simplemente pondría la url en el enlace "../site/SPageServer/?pagename=PWOS_SK_homepage#find" y eso funciona, sin embargo, eso romperá mi seguimiento de url si la gente llega a la página usando el tocador url.

Aquí hay un enlace a la página:

https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage

Cualquier ayuda es apreciada.

Gracias

html anchor

0

SorryEh 7 oct. 2019 a las 17:29

Answer 1

Como se menciona en un comentario, sería mejor hacer esto con JS simple en lugar de jugar con la funcionalidad del navegador. Sin tocar el HTML y asumir que tiene jQuery en el sitio, agregaría algo como lo siguiente en una etiqueta de script (obviamente debajo de <a href='#find'> y div#find)

jQuery("a[href='#find']").click(function() {
    event.preventDefault();
    jQuery("body, html").animate({ 
        scrollTop: jQuery("#find").offset().top 
    });
})

Esto le permite permanecer en la página sin vincular / desordenar los datos de seguimiento, mientras que la ventana se desplazará al elemento adecuado sin importar qué tan lejos esté. Espero que esto ayude (aunque lo hayas logrado antes que yo;))

0

adr5240 8 oct. 2019 a las 14:09

Answer 2

Cuando pasa el mouse sobre el enlace que ve:

https://secure2.convio.net/cco/site/#find

Pero esperas:

https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find

Esto es causado por la etiqueta en el encabezado.

-1

mathertel 7 oct. 2019 a las 15:03

Answer 3

Su página comienza con <base href="https://secure2.convio.net/cco/site/" />, así que cuando hace clic en href="#find" se resuelve en https://secure2.convio.net/cco/site/#find.

Debe escribir su URL en relación con la URL base, no la página actual.

2

Quentin 7 oct. 2019 a las 14:50

El enlace de anclaje va a la página no encontrada en lugar de la sección dentro de la misma página

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html