AngularJS實現(xiàn)的錨點樓層跳轉(zhuǎn)功能示例
更新時間：2018年01月02日 12:13:19 作者：Web攻城獅
這篇文章主要介紹了AngularJS實現(xiàn)的錨點樓層跳轉(zhuǎn)功能,涉及AngularJS事件響應實現(xiàn)錨點跳轉(zhuǎn)功能的相關操作技巧,需要的朋友可以參考下
本文實例講述了AngularJS實現(xià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><!-- 定義右邊的點 -->
<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：
點擊錨點3：
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
本文主要介紹AngularJS簡單應用程序,這里提供了詳細的流程和代碼程序，有需要的小伙伴可以參考下2016-08-08
本篇文章主要介紹了angularJS深拷貝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
Directive是一個非常棒的功能?？梢詫崿F(xiàn)我們自義的的功能方法。下面通過實例代碼給大家介紹Angularjs自定義指令Directive相關知識，感興趣的朋友一起學習吧2017-05-05
深入理解Angularjs向指令傳遞數(shù)據(jù)雙向綁定機制
這篇文章主要深入的給大家介紹了Angularjs向指令傳遞數(shù)據(jù)，雙向綁定機制的相關資料,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了AngularJS動態(tài)加載模塊和依賴的方法,結(jié)合實例形式分析了AngularJS使用ocLazyLoad實現(xiàn)動態(tài)加載的相關操作技巧,需要的朋友可以參考下2016-11-11
angular4模塊中給標簽添加背景圖的實現(xiàn)方法
下面小編就為大家?guī)硪黄猘ngular4模塊中給標簽添加背景圖的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
淺談Angular.js中使用$watch監(jiān)聽模型變化
當angular數(shù)據(jù)模型發(fā)生變化時，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化，有興趣的可以了解一下2017-01-01
這篇文章主要介紹了SpringMVC簡單整合Angular2的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Angular4編程之表單響應功能,結(jié)合實例形式分析了Angular4表單響應功能的具體實現(xiàn)步驟與相關操作技巧,需要的朋友可以參考下2017-12-12
使用Angular CLI進行Build(構(gòu)建)和Serve詳解
這篇文章主要介紹了使用Angular CLI進行Build(構(gòu)建)和Serve詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03