How to do internal scrolling in for different parts of page and other page also ,when i am creating dynamic child routes using aurelia?

Question

I have applied same logic as given on answer of the Question No: 34486644 or see the link

How do I use a router and inbuilt/custom attributes to create dropdown menu in aurelia?

But the problem is it is showing "Route not Found".

In my JS File i have added:

JS File Route not Found error

Also,I have # in my app url [localhost/appname/#/modulename] Does the # is creating some problem ? If not then what is the issue ?

Code samples which i am using:

For dynamic route: moduleName.js

{
            route: 'Services',
            name: 'Services',
            nav: true,
            title: 'Services',
            moduleId: 'App/modulename/compdemo1',
            settings: {
                subMenu: [
                    { href: '#/ServicesSM1', title: 'Services 1' },
                    { href: '#/ServicesSM2', title: 'Services 2' },
                    { href: '#/ServicesSM3', title: 'Services 3' },
                    { href: '#/ServicesSM4', title: 'Services 4' }
                ]
            }
        }

For HTML : modulename.html

<li repeat.for="route of router.navigation">
                 <!-- if route has no submenu -->
                <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a>

                 <!-- if route has submenu -->
                <a href ="javascript:void(0);" if.bind="route.settings.subMenu">
                 ${route.title}></a>

                <!--<label if.bind="route.settings.subMenu">${route.title</label>-->

                 <ul if.bind="route.settings.subMenu">
                    <li repeat.for="menu of route.settings.subMenu">
                         <a href.bind="menu.href">${menu.title}</a>
                     </li>
                </ul>
            </li>

Answer 1

So the problem is it is not taking the proper route,i have found the solution to navigate it properly.

1)Add a click event to your href in HTML file

<div>
        <ul>
            <li repeat.for="route of router.navigation">
                <!-- if route has no submenu -->
                <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a>

                <!-- if route has submenu -->
                <a href.bind="route.href" if.bind="route.settings.subMenu">${route.title}</a>
                <ul if.bind="route.settings.subMenu">
                    <li repeat.for="menu of route.settings.subMenu">
                        <a href="javascript:void(0);" id="subMenu" click.delegate="$parent.$parent.navigator($parent.route, menu)">${menu.title}</a>
                    </li>
                </ul>
            </li>
        </ul>   
    </div>
<div>
            <router-view></router-view>
        </div>

2)In your JS File

navigator(row, arg1) {
    //To create a proper navigation for the page.
    this.router.navigate(row.relativeHref + '?q=' + arg1.href);

    //To perform performance internal scrolling.
    var dest = 0;

    if (typeof ($('#' + arg1.href).offset()) !== "undefined") {
        if ($('#' + arg1.href).offset().top > $(document).height() - $(window).height()) {
            dest = $(document).height() - $(window).height();
        } else {
            dest = $('#' + arg1.href).offset().top;
        }
        $('html,body').animate({ scrollTop: dest }, 1000, 'swing');
    }
}

3) Create proper route

{
        route: 'Services',
        name: 'Services',
        nav: true,
        title: 'Services',
        moduleId: 'App/modulename/compdemo1',
        settings: {
            subMenu: [
                { href: 'SM1', title: 'Services 1' },
                { href: 'SM2', title: 'Services 2' },
                { href: 'SM3', title: 'Services 3' },
                { href: 'SM4', title: 'Services 4' }
            ]
        }
    }