首頁 >web前端 >js教程 >在AngularJS中如何實現跳轉功能

在AngularJS中如何實現跳轉功能

亚连原創: 2018-06-14 11:29:541837瀏覽

這篇文章主要介紹了AngularJS實現的錨點樓層跳轉功能,涉及AngularJS事件響應實現錨點跳轉功能的相關操作技巧,需要的朋友可以參考下

本文實例講述了AngularJS所實現的錨點樓層跳轉功能。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title>anchor</title>
    <style>
      #wei p{
        width:100%;
        height:720px;
        background: red;
        color:#fff;
        text-align:center;
        line-height: 720px;
        margin:20px;
        font-size: 80px;
      }
      #wei ul{
        position: fixed;
        top:300px;
        right:60px;
      }
      #wei ul li{
        width:20px;
        display:block;
        height:20px;
        background: gray;
        color:#fff;
        text-align:center;
        line-height: 20px;
        border-radius: 50%;
        margin-bottom: 20px;
        cursor: pointer;
      }
    </style>
  </head>
  <body ng-controller="show">
      <p id="wei">
        <p ng-repeat="attr in arr" ng-attr-id="p{{attr}}">{{attr}}</p>
        <ul><!-- 定义右边的点 -->
          <li ng-repeat="attr in arr" ng-click="jump(&#39;p&#39;+attr)">{{attr}}</li>
        </ul>
      </p>
    <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var app = angular.module(&#39;myApp&#39;,[]);
      app.controller(&#39;show&#39;,[&#39;$scope&#39;,&#39;$location&#39;,&#39;$anchorScroll&#39;,function($scope,$location,$anchorScroll){
        $scope.arr=[1,2,3,4,5];
        $scope.jump=function(id){
          //console.log(id);
          $location.hash(id);//添加锚点
          $anchorScroll();  //重新定义服务,解决当滑动时点击锚点无作用的bug
        }
      }]);
    </script>
  </body>
</html>

運行效果如下：

點擊錨點2：

點擊錨點3：

上面是我整理給大家的，希望今後對大家有幫助。

在Nginx中如何設定多站點vhost

在express mockjs中如何實作後台資料傳送

使用mock.js產生隨機資料

以上是在AngularJS中如何實現跳轉功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：在AngularJS中如何實現拖曳功能下一篇：在AngularJS中如何實現拖曳功能

看更多