Skip to main content
Relanzada por el usuario Comunidad

Tengo el siguiente código de ejemplo para explicar mi duda.

Tengo una etiqueta "a""a" con un href="#menu"href="#menu" para direccionar a otra parte de la misma pagina(al nav qnav que tiene el id="menu"id="menu"). Con HTMLHTML puro no tengo ningunningún problema, de hecho la url que visualiza es la correcta (con el sufijo #menu#menu), pero cuando quiero pasar esto a mi proyecto Angular no funciona. 

Por lo que veo me redirecciona a la pagina 404pagina 404 que configure para las rutas que no uso y asumo que se trata por ese sufijo que se agrega a la URLURL.

La duda es sobre como puedo llevar este comportamiento al proyecto Angular en el que quiero aplicar?

Muchisimas gracias de antemano...Mi código:

<div class=" logo jumbotron  card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ;  display:flex; justify-content:center; align-items:center;">
                    <div class="text-white text-center py-5 px-4">
                        <div>
                        
                        
                        <a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; "  class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
                        </div>
                    </div>
                </div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <!--Navbar-->
                <nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">

                    <!-- Navbar brand -->
                    <a class="navbar-brand" href="#">naveacion</a>
                
        </nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Muchisimas gracias de antemano...

Tengo el siguiente código de ejemplo para explicar mi duda.

Tengo una etiqueta "a" con un href="#menu" para direccionar a otra parte de la misma pagina(al nav q tiene el id="menu"). Con HTML puro no tengo ningun problema, de hecho la url que visualiza es la correcta (con el sufijo #menu), pero cuando quiero pasar esto a mi proyecto Angular no funciona. Por lo que veo me redirecciona a la pagina 404 que configure para las rutas que no uso y asumo que se trata por ese sufijo que se agrega a la URL.

La duda es sobre como puedo llevar este comportamiento al proyecto Angular en el que quiero aplicar?

Muchisimas gracias de antemano...

<div class=" logo jumbotron  card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ;  display:flex; justify-content:center; align-items:center;">
                    <div class="text-white text-center py-5 px-4">
                        <div>
                        
                        
                        <a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; "  class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
                        </div>
                    </div>
                </div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <!--Navbar-->
                <nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">

                    <!-- Navbar brand -->
                    <a class="navbar-brand" href="#">naveacion</a>
                
        </nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Tengo el siguiente código de ejemplo para explicar mi duda.

Tengo una etiqueta "a" con un href="#menu" para direccionar a otra parte de la misma pagina(al nav que tiene el id="menu"). Con HTML puro no tengo ningún problema, de hecho la url que visualiza es la correcta (con el sufijo #menu), pero cuando quiero pasar esto a mi proyecto Angular no funciona. 

Por lo que veo me redirecciona a la pagina 404 que configure para las rutas que no uso y asumo que se trata por ese sufijo que se agrega a la URL.

La duda es sobre como puedo llevar este comportamiento al proyecto Angular en el que quiero aplicar?

Mi código:

<div class=" logo jumbotron  card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ;  display:flex; justify-content:center; align-items:center;">
                    <div class="text-white text-center py-5 px-4">
                        <div>
                        
                        
                        <a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; "  class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
                        </div>
                    </div>
                </div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <!--Navbar-->
                <nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">

                    <!-- Navbar brand -->
                    <a class="navbar-brand" href="#">naveacion</a>
                
        </nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Muchisimas gracias de antemano...

edito el código para que no sea tan confuso
Origen Enlace
<div class=" logo jumbotron  card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ;  display:flex; justify-content:center; align-items:center;">
                    <div class="text-white text-center py-5 px-4">
                        <div>
                        <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Bienvenido a nuestra Tienda Virtual</strong></h2>
                        <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                            optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
                        </p>
                        <a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; "  class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
                        </div>
                    </div>
                </div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <!--Navbar-->
                <nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">

                    <!-- Navbar brand -->
                    <a class="navbar-brand" href="#">naveacion</a>
                
        </nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=" logo jumbotron  card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ;  display:flex; justify-content:center; align-items:center;">
                    <div class="text-white text-center py-5 px-4">
                        <div>
                        <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Bienvenido a nuestra Tienda Virtual</strong></h2>
                        <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                            optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
                        </p>
                        <a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; "  class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
                        </div>
                    </div>
                </div>


<br><br><br><br><br><br>

                <!--Navbar-->
                <nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">

                    <!-- Navbar brand -->
                    <a class="navbar-brand" href="#">naveacion</a>
                
        </nav>
<div class=" logo jumbotron  card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ;  display:flex; justify-content:center; align-items:center;">
                    <div class="text-white text-center py-5 px-4">
                        <div>
                        
                        
                        <a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; "  class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
                        </div>
                    </div>
                </div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

                <!--Navbar-->
                <nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">

                    <!-- Navbar brand -->
                    <a class="navbar-brand" href="#">naveacion</a>
                
        </nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Origen Enlace

Navegacion dentro de la misma pagina en angular 7

Tengo el siguiente código de ejemplo para explicar mi duda.

Tengo una etiqueta "a" con un href="#menu" para direccionar a otra parte de la misma pagina(al nav q tiene el id="menu"). Con HTML puro no tengo ningun problema, de hecho la url que visualiza es la correcta (con el sufijo #menu), pero cuando quiero pasar esto a mi proyecto Angular no funciona. Por lo que veo me redirecciona a la pagina 404 que configure para las rutas que no uso y asumo que se trata por ese sufijo que se agrega a la URL.

La duda es sobre como puedo llevar este comportamiento al proyecto Angular en el que quiero aplicar?

Muchisimas gracias de antemano...

<div class=" logo jumbotron  card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ;  display:flex; justify-content:center; align-items:center;">
                    <div class="text-white text-center py-5 px-4">
                        <div>
                        <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Bienvenido a nuestra Tienda Virtual</strong></h2>
                        <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                            optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
                        </p>
                        <a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; "  class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
                        </div>
                    </div>
                </div>


<br><br><br><br><br><br>

                <!--Navbar-->
                <nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">

                    <!-- Navbar brand -->
                    <a class="navbar-brand" href="#">naveacion</a>
                
        </nav>