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)滑動(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é)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
下面小編就為大家?guī)硪黄猘ngularjs中的$eval方法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個(gè)現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03
詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能
這篇文章主要介紹了詳解Angular5/Angular6項(xiàng)目如何添加熱更新(HMR)功能，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
詳解AngularJS用Interceptors來統(tǒng)一處理HTTP請(qǐng)求和響應(yīng)
本篇文章主要介紹了AngularJS用Interceptors來統(tǒng)一處理HTTP請(qǐng)求和響應(yīng) ，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了Angular中的interceptors攔截器,需要的朋友可以參考下2017-06-06
這篇文章主要和大家一起學(xué)習(xí)Angularjs分頁(yè)指令，代碼很詳細(xì)，文章結(jié)構(gòu)緊湊，感興趣的小伙伴們可以參考一下2016-07-07
Angular2使用Guard和Resolve進(jìn)行驗(yàn)證和權(quán)限控制
本篇文章主要介紹了Angular2使用Guard和Resolve進(jìn)行驗(yàn)證和權(quán)限控制，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
angular2路由切換改變頁(yè)面title的示例代碼
本篇文章主要介紹了angular2路由切換改變頁(yè)面title的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
本文主要講解AngularJS Ajax的知識(shí)，這里提供詳細(xì)資料及代碼示例，幫助學(xué)習(xí)AngularJS的朋友,有需要的小伙伴可以參考下2016-08-08
現(xiàn)實(shí)世界千變?nèi)f化,區(qū)區(qū)幾種內(nèi)置指令不可能滿足所有的需求,下面這篇文章主要給大家介紹了關(guān)于Angular自定義指令Tooltip的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05