AngularJS實現的錨點樓層跳轉功能示例

2019-11-19 14:36:49

字體：大中小

來源：轉載

供稿：網友

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

<!DOCTYPE html><html ng-app="myApp">  <head>    <meta charset="UTF-8">    <title>anchor</title>    <style>      #wei div{        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">      <div id="wei">        <div ng-repeat="attr in arr" ng-attr-id="div{{attr}}">{{attr}}</div>        <ul><!-- 定義右邊的點 -->          <li ng-repeat="attr in arr" ng-click="jump('div'+attr)">{{attr}}</li>        </ul>      </div>    <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">      var app = angular.module('myApp',[]);      app.controller('show',['$scope','$location','$anchorScroll',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：