溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關AngularJS如何實現(xiàn)的錨點樓層跳轉功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動態(tài)效果，讓網(wǎng)頁更加美觀。
AngularJS實現(xià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如何實現(xiàn)的錨點樓層跳轉功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
