Go to certain part of page, nested view - Angular JS

Question

Hi I have a page in which nested views are injected I am using states. The problem is I have a scenario in which on button click I want to show a certain part of the page or you can say that hyperlink. But I am confused how to go to that nested view exactly. I did some thing like this.

<a href="username#media">More media</a>

But It does not work always and sometimes it shows the exact part but sometimes its position is a little downward.

Here is my route file.

 .state('profile', {
            url: '/:artist_name?jobId',
            params: {
                artist_id: null,
                jobId: {value: null, squash: true},
                openRepertoire: {value: false, squash: true}
            },
            views: {
                '': {
                    templateUrl: 'views/profile/artistprofile.main.view.html',
                    controller: 'ArtistProfileMainController',
                    controllerAs: 'profile',
                }, 'basicInfo@profile': {
                    templateUrl: 'views/profile/basicInfo.view.html',
                    controller: 'ArtistProfileBasicInfoController',
                    controllerAs: 'basicInfo',
                }, 'header@profile': {
                    templateUrl: 'views/profile/header.view.html',
                    controller: 'ArtistProfileHeaderController',
                    controllerAs: 'header',
                }, 'quotes@profile': {
                    templateUrl: 'views/profile/quotes.view.html',
                    controller: 'ArtistProfileQuotesController',
                    controllerAs: 'quotes',
                }, 'schedule@profile': {
                    templateUrl: 'views/profile/schedule.view.html',
                    controller: 'ArtistProfileScheduleController',
                    controllerAs: 'schedule',
                }, 'media@profile': {
                    templateUrl: 'views/profile/media.view.html',
                    controller: 'ArtistProfileMediaController',
                    controllerAs: 'media',
             }, resolve: {
                $title: getUserProfile,
                user: isLogin
            }

        })

Now on click I want to go to that part of page where media view is injected. I used anchorscroll too. But the results were not always 100% perfect. Sometimes it does open the page and show the media part and sometimes it does not.

Answer 1

With UI Router, using the ui-sref directive supports using a # param to link to an in-page ID. To use it, change your link to the following:

`<a ui-sref="profile({'#': '<your div id goes here>'})"></a>`