AngularJS實(shí)現(xiàn)的錨點(diǎn)樓層跳轉(zhuǎ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向指令傳遞數(shù)據(jù)雙向綁定機(jī)制
這篇文章主要深入的給大家介紹了Angularjs向指令傳遞數(shù)據(jù),雙向綁定機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-12-12angular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猘ngular4模塊中給標(biāo)簽添加背景圖的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09淺談Angular.js中使用$watch監(jiān)聽模型變化
當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí),我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化,有興趣的可以了解一下2017-01-01使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解
這篇文章主要介紹了使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03