欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能示例

 更新時(shí)間:2018年01月02日 12:13:19   作者:Web攻城獅  
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能,涉及AngularJS事件響應(yīng)實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)功能的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎn)功能。分享給大家供大家參考,具體如下:

<!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><!-- 定義右邊的點(diǎn) -->
          <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);//添加錨點(diǎn)
          $anchorScroll();  //重新定義服務(wù),解決當(dāng)滑動時(shí)點(diǎn)擊錨點(diǎn)無作用的bug
        }
      }]);
    </script>
  </body>
</html>

運(yùn)行效果如下:

點(diǎn)擊錨點(diǎn)2:

點(diǎn)擊錨點(diǎn)3:

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)

希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • AngularJS教程之簡單應(yīng)用程序示例

    AngularJS教程之簡單應(yīng)用程序示例

    本文主要介紹AngularJS簡單應(yīng)用程序,這里提供了詳細(xì)的流程和代碼程序,有需要的小伙伴可以參考下
    2016-08-08
  • angularJS深拷貝詳解

    angularJS深拷貝詳解

    本篇文章主要介紹了angularJS深拷貝,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-03-03
  • Angularjs自定義指令Directive詳解

    Angularjs自定義指令Directive詳解

    Directive是一個(gè)非常棒的功能??梢詫?shí)現(xiàn)我們自義的的功能方法。下面通過實(shí)例代碼給大家介紹Angularjs自定義指令Directive相關(guān)知識,感興趣的朋友一起學(xué)習(xí)吧
    2017-05-05
  • 深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機(jī)制

    深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機(jī)制

    這篇文章主要深入的給大家介紹了Angularjs向指令傳遞數(shù)據(jù),雙向綁定機(jī)制的相關(guān)資料,需要的朋友可以參考下
    2016-12-12
  • AngularJS動態(tài)加載模塊和依賴的方法分析

    AngularJS動態(tài)加載模塊和依賴的方法分析

    這篇文章主要介紹了AngularJS動態(tài)加載模塊和依賴的方法,結(jié)合實(shí)例形式分析了AngularJS使用ocLazyLoad實(shí)現(xiàn)動態(tài)加載的相關(guān)操作技巧,需要的朋友可以參考下
    2016-11-11
  • angular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法

    angular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄猘ngular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09
  • 淺談Angular.js中使用$watch監(jiān)聽模型變化

    淺談Angular.js中使用$watch監(jiān)聽模型變化

    當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí),我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化,有興趣的可以了解一下
    2017-01-01
  • SpringMVC簡單整合Angular2的示例

    SpringMVC簡單整合Angular2的示例

    這篇文章主要介紹了SpringMVC簡單整合Angular2的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • Angular4編程之表單響應(yīng)功能示例

    Angular4編程之表單響應(yīng)功能示例

    這篇文章主要介紹了Angular4編程之表單響應(yīng)功能,結(jié)合實(shí)例形式分析了Angular4表單響應(yīng)功能的具體實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • 使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解

    使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解

    這篇文章主要介紹了使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03

最新評論