Menu icon Foundation
Foundation Scroll to top Issue

HELP!

I have a single page application built with angular.js and foundation and I simple want to ensure when I load into another state the new state loads to the top of the page so the user doesn't have to scroll back up the page to get to the start of the content.

I using a fixed nav bar and I've tried setting my autoscroll="true " and also tried using the the data-options="scrolltop : true".

These options don't seem to be doing anything at all.

Link to the site can be found here microsite-app-demo.ifdgui.com

If you select the economy class and submit and hit on any of the links on the on board page you will notice that the header is cut off when you change to the new state.

   <div ng-controller="OffCanvasDemoCtrl">
   <div class="off-canvas-wrap " >
  <div class="inner-wrap">
      <div class="sticky">
            <nav class="tab-bar" autoscroll="true " ng-click="doTheBack()"  >

<!--            Back Button -->
                <section class="left-small">
                <a class=" icon-left-open"  ng-click="$back()"  ><span></span></a>
                </section>
<!--            Main Menu Button -->
                <section class="middle tab-bar-section">
                <a class="left-off-canvas-toggle menu-icon" style="float: left;"><span></span></a> 
                <h1 class="title" >{{$state.current.data.title | translate}}<span class="service" ></span></h1> 
                </section>
<!--            Language button-->
               <section class="right-small">
                   <a class="right-off-canvas-toggle " style="padding-left:10px;" ><i class="icon-globe"></i><span></span></a>
                </section>

            </nav>
          </div>
          

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list" id="mainmenu">
        
        <li><label translate="menu_inflight_title"></label></li>
        <li class="has-submenu">
            <a ui-sref="app.home"  translate="menu_inflight_route_selector"></a>
        </li>
                
        <li><a ui-sref="app.onboard.ec" ui-sref-active="active"><i class="icon-glyph-18"></i><span translate="menu_inflight_onboard"></span></a></li>
        <li><a ui-sref="app.movies.list" ui-sref-active="active"> <i class="icon-glyph-79"></i><span translate="menu_inflight_movies"></span></a></li>
        <li><a ui-sref="app.tvs.list" ui-sref-active="active"> <i class="icon-glyph-78"></i> <span translate="menu_inflight_tv"></span></a></li>
        <li><a ui-sref="app.audios.list" ui-sref-active="active"> <i class="icon-glyph-77"></i> <span translate="menu_inflight_audio"></span></a></li>
        <li><a ui-sref="app.games.list" ui-sref-active="active">  <i class="icon-glyph-100"></i> <span translate="menu_inflight_games"></span></a></li>
        <li><a ui-sref="app.publications.list" ui-sref-active="active">   <i class="icon-glyph-85"></i>  <span translate="menu_inflight_publications"></span></a></li>
        <li><a ui-sref="app.menu" ui-sref-active="active"><i class="icon-glyph-106"></i>  <span translate="menu_inflight_menu">Menu</span></a></li>
        <li><a ui-sref="app.dutyfree" ui-sref-active="active"> <i class="icon-glyph-71"></i><span translate="menu_inflight_duty_free"></span></a></li>
        
      </ul>
    </aside>

 
      
       <aside class="right-off-canvas-menu">
                <ul class="off-canvas-list">
                  <li><label translate="language_selection"></label></li>
                  <li><a ng-click="changeLanguage('en')">English</a></li>
                  <li><a ng-click="changeLanguage('de')">Deutsch</a></li>
                </ul>
       </aside>

    <section class="main-section">
        
        <div class="full-height" >
      <div  ui-view="main" autoscroll="true " ></div>
      </div>
      
      
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
    </div>


<script>$(document).foundation({
    offcanvas: {
        // Sets method in which offcanvas opens.
        // [ move | overlap_single | overlap ]
        open_method: 'move',
        // Should the menu close when a menu link is clicked?
        // [ true | false ]
        close_on_click: true
    }
});</script>
<script>
   
    $(".off-canvas-list .has-submenu a").click(function () {
       $('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');
    });
</script>
         

         

Foundation Angular Scroll Top header missing

HELP!

I have a single page application built with angular.js and foundation and I simple want to ensure when I load into another state the new state loads to the top of the page so the user doesn't have to scroll back up the page to get to the start of the content.

I using a fixed nav bar and I've tried setting my autoscroll="true " and also tried using the the data-options="scrolltop : true".

These options don't seem to be doing anything at all.

Link to the site can be found here microsite-app-demo.ifdgui.com

If you select the economy class and submit and hit on any of the links on the on board page you will notice that the header is cut off when you change to the new state.

   <div ng-controller="OffCanvasDemoCtrl">
   <div class="off-canvas-wrap " >
  <div class="inner-wrap">
      <div class="sticky">
            <nav class="tab-bar" autoscroll="true " ng-click="doTheBack()"  >

<!--            Back Button -->
                <section class="left-small">
                <a class=" icon-left-open"  ng-click="$back()"  ><span></span></a>
                </section>
<!--            Main Menu Button -->
                <section class="middle tab-bar-section">
                <a class="left-off-canvas-toggle menu-icon" style="float: left;"><span></span></a> 
                <h1 class="title" >{{$state.current.data.title | translate}}<span class="service" ></span></h1> 
                </section>
<!--            Language button-->
               <section class="right-small">
                   <a class="right-off-canvas-toggle " style="padding-left:10px;" ><i class="icon-globe"></i><span></span></a>
                </section>

            </nav>
          </div>
          

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list" id="mainmenu">
        
        <li><label translate="menu_inflight_title"></label></li>
        <li class="has-submenu">
            <a ui-sref="app.home"  translate="menu_inflight_route_selector"></a>
        </li>
                
        <li><a ui-sref="app.onboard.ec" ui-sref-active="active"><i class="icon-glyph-18"></i><span translate="menu_inflight_onboard"></span></a></li>
        <li><a ui-sref="app.movies.list" ui-sref-active="active"> <i class="icon-glyph-79"></i><span translate="menu_inflight_movies"></span></a></li>
        <li><a ui-sref="app.tvs.list" ui-sref-active="active"> <i class="icon-glyph-78"></i> <span translate="menu_inflight_tv"></span></a></li>
        <li><a ui-sref="app.audios.list" ui-sref-active="active"> <i class="icon-glyph-77"></i> <span translate="menu_inflight_audio"></span></a></li>
        <li><a ui-sref="app.games.list" ui-sref-active="active">  <i class="icon-glyph-100"></i> <span translate="menu_inflight_games"></span></a></li>
        <li><a ui-sref="app.publications.list" ui-sref-active="active">   <i class="icon-glyph-85"></i>  <span translate="menu_inflight_publications"></span></a></li>
        <li><a ui-sref="app.menu" ui-sref-active="active"><i class="icon-glyph-106"></i>  <span translate="menu_inflight_menu">Menu</span></a></li>
        <li><a ui-sref="app.dutyfree" ui-sref-active="active"> <i class="icon-glyph-71"></i><span translate="menu_inflight_duty_free"></span></a></li>
        
      </ul>
    </aside>

 
      
       <aside class="right-off-canvas-menu">
                <ul class="off-canvas-list">
                  <li><label translate="language_selection"></label></li>
                  <li><a ng-click="changeLanguage('en')">English</a></li>
                  <li><a ng-click="changeLanguage('de')">Deutsch</a></li>
                </ul>
       </aside>

    <section class="main-section">
        
        <div class="full-height" >
      <div  ui-view="main" autoscroll="true " ></div>
      </div>
      
      
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>
    </div>


<script>$(document).foundation({
    offcanvas: {
        // Sets method in which offcanvas opens.
        // [ move | overlap_single | overlap ]
        open_method: 'move',
        // Should the menu close when a menu link is clicked?
        // [ true | false ]
        close_on_click: true
    }
});</script>
<script>
   
    $(".off-canvas-list .has-submenu a").click(function () {
       $('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');
    });
</script>
         

         

Chris Oyler about 4 years ago

Perhaps I'm not seeing the problem, but when I click on links after class selection, it seems to work just fine. Can you screencap the issue perhaps, so I have something to compare it to?

Chris Oyler about 4 years ago

Also, and it may be a little late for this, but have you seen Foundation for Apps?
https://github.com/zurb/foundation-apps

stephen freir about 4 years ago

Thanks for the reply Chris

I solved the problem by Initialising the the $anchorSroll at run time. For anyone having this problem add the code below. I had to give up on the auto scroll option as I couldn't resolve it.
```App.run(function( $rootScope, $anchorScroll){

//stephen Send state to the top of every page.
$rootScope.$on('$stateChangeSuccess', function () {
$anchorScroll();

});

stephen freir about 4 years ago

Thanks for the reply Chris

I solved the problem by Initialising the the $anchorSroll at run time. For anyone having this problem add the code below. I had to give up on the auto scroll option as I couldn't resolve it.
```App.run(function( $rootScope, $anchorScroll){

//stephen Send state to the top of every page.
$rootScope.$on('$stateChangeSuccess', function () {
$anchorScroll();

});

stephen freir about 4 years ago

Thanks for the reply Chris

I solved the problem by Initialising the the $anchorSroll at run time. For anyone having this problem add the code below. I had to give up on the auto scroll option as I couldn't resolve it.
```App.run(function( $rootScope, $anchorScroll){

//stephen Send state to the top of every page.
$rootScope.$on('$stateChangeSuccess', function () {
$anchorScroll();

});

stephen freir about 4 years ago

Thanks for the reply Chris

I solved the problem by Initialising the the $anchorSroll at run time. For anyone having this problem add the code below. I had to give up on the auto scroll option as I couldn't resolve it.
```App.run(function( $rootScope, $anchorScroll){

//stephen Send state to the top of every page.
$rootScope.$on('$stateChangeSuccess', function () {
$anchorScroll();

});

stephen freir about 4 years ago

Thanks for the reply Chris

I solved the problem by Initialising the the $anchorSroll at run time. For anyone having this problem add the code below. I had to give up on the auto scroll option as I couldn't resolve it.
```App.run(function( $rootScope, $anchorScroll){

//stephen Send state to the top of every page.
$rootScope.$on('$stateChangeSuccess', function () {
$anchorScroll();

});