scroll to a component on a click using Angular

Question

Hey i'm trying to create a simple navigation bar with a few link buttons. i want that when i click on a button, it will scroll to the right component. i know i can do it with jquery using ScrollTo() but with Angular i don't have all the HTML in 1 page. is it possible to make it work with angular ?

this fiddle describes the outcome i'm looking for :

$(document).ready(function() {
    $('a[rel="relativeanchor"]').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    }); 
});

http://jsfiddle.net/francescov/4DcNH/

How do you want to scroll to an element which is not in the HTML? Or you mean one HTML file? Are the component's in the DOM? — Laker
– Laker, Commented Dec 31, 2017 at 18:04
well i think ill have to use @Output() and @Input() decorators in order for this to work... your question made me realize that :) — KLTR
– KLTR, Commented Dec 31, 2017 at 18:07

Optimus Pette · Accepted Answer · 2017-12-31 18:20:24Z

4

You can use window.location.hash. like this.

<button (click)="goTo('myComponent')"></button>

This is the goTo function in your component:

goTo(location: string): void {
    window.location.hash = location;
}

Then this is the component you want to navigate to:

<my-component id='myComponent'></my-component>

When you click the button, it will navigate to the element with an id "myComponent" which is your component.

answered Dec 31, 2017 at 18:20

Optimus Pette

3,4203 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KLTR Over a year ago

it does work . do i have any way to add animation to it ?

Collectives™ on Stack Overflow

scroll to a component on a click using Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related