$ anchorScroll不工作后回index.html页面UI温泉 [英] $anchorScroll not working on after back to Index.html page Onsen UI

问题描述

您好，我在角JS和温泉UI新。我有问题$ anchorScroll index.html中不工作，如果只有我回到第1页。一切都很好，如果我刷新浏览器。
index.html中我有两个页面：

  

  
1. 第1页。有按钮定位到第2页

  
2. 在第2页我有号码表：从1到20后的Page2自动滚动到列表号5和$ anchorScroll工作正常。

  

  $ scope.scrollTo =功能（elementId）{
         $超时（函数（）{
              $的location.hash（elementId）;
              $ anchorScroll（）;
          }）;      };      在里面（）;
      功能的init（）{        $ scope.scrollTo（'没有-5'）;      }
 

在名单上的底部，我有OK按钮即返回到第1页（index.html的）在code是

  $ scope.back =功能（elementId）{
         $ scope.myNavigator.pushPage（'的index.html'）;      };
 

  <醇开始=3>
  

问题是后，我回到第1页，然后导航到再次PAGE2。这$ anchorScroll是行不通的。这是为什么发生？我已经写在codePEN的code
  链接低于

  

的http：//$c$cpen.io/lapisan/pen/LGbbJL

解决方案

如果您使用 myNavigator.pushPage 要添加新的页面的堆栈。在你的情况，如果你使用 myNavigator.resetToPage 方法重置导航仪 index.html的这是更好。

$ scope.back =功能（elementId）{
  $ scope.myNavigator.resetToPage（'的index.html'）;
};


下面是你的codePEN例如一个固定的版本，希望它能帮助！

的http：//$c$cpen.io/andipavllo/pen/LGbQgy

Hello I am new in angular JS and Onsen UI. i have problem $anchorScroll not working if only i back to page1 in index.html. everything is fine if i refresh browser. in index.html i have two page :

1. page1. there is button to navigate to page2
2. in page2 i have number list : from 1 to 20. After open page2 automatically scroll to list number 5 and the $anchorScroll is working fine.

     $scope.scrollTo = function(elementId) {
         $timeout(function() {
              $location.hash(elementId);
              $anchorScroll();
          });

      };

      init();
      function init(){

        $scope.scrollTo('no-5');

      }

in bottom on the list i have OK button that is back to page1 (index.html) the code is

       $scope.back = function(elementId) {
         $scope.myNavigator.pushPage('index.html');

      };

3. The problem is after i back to page1 and then navigate to page2 again. this $anchorScroll is not working. why this is happen? i have written the code in codepen the link is below

http://codepen.io/lapisan/pen/LGbbJL

解决方案

If you use myNavigator.pushPage you are adding a new page to the stack. In your case, it's better if you reset the navigator to index.html by using myNavigator.resetToPage method.

$scope.back = function(elementId) {
  $scope.myNavigator.resetToPage('index.html');
};

Here is a fixed version of your CodePen example, hope it helps!

http://codepen.io/andipavllo/pen/LGbQgy

这篇关于$ anchorScroll不工作后回index.html页面UI温泉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！