Scroll to a div from another page using angular navigate navigate 4

Question

Scroll to a div from another page using angular navigate navigate 4

Navigation

#1 by (1 votes)

1

I'm doing a navigation menu, in which I use angular.navigate router, which works correctly. However, I do not know how to do it so that when I click on the first element of the navigation bar, I will go to the page and scroll to a div that I have.

Here my code:

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

        <ul class="ulderecho nav navbar-nav">
            <li style="border: none;">
                <a (click)="this.router.navigate(['/contactanos']">Ayuda</a>
            </li>
            <li style="border: none;">
                <a (click)="this.router.navigate(['/inicio'])">Inicio</a>
            </li>
        </ul>
    </div>

As you can see I have two elements called help and init which are directed to two web pages that I already have done.

When you click on Help, in addition to being directed to the help page, I want you to scroll to a div that is in the middle of the help page, this div is called "helpDiv".

How can I add the scroll to the navigation path.

html angular

asked by Gerardo Gutiérrez 11.07.2018 в 23:24

source

1 answer

Putting a web site inside an Ionic app Download laravel image

score 1 · Answer 1

Question of the OP: How to address a page and scroll to a div that I have?

Once you redirect to the page you can go to the div you want, example:

setTimeout(function() {

  location.href = "#irMedio";
}, 1000);

div {
  width: 500px;
  height: 500px;
  background-color: red;
}

#arriba {
  background-color: blue;
}

#medio {
  background-color: red;
}

#abajo {
  background-color: black;
}

<a href="#irArriba">arriba</a>
<a href="#irMedio">medio</a>
<a href="#irAbajo">abajo</a>


<div id="arriba">
  <a name="irArriba"></a>
</div>
<div id="medio">
  <a name="irMedio"></a>
</div>
<div id="abajo">
  <a name="irAbajo"></a>
</div>

Note that each div has <a name=""></a>