angular跳转到html5,在AngularJS中如何实现跳转功能

这篇文章主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下

本文实例讲述了AngularJS实现的锚点楼层跳转功能。分享给大家供大家参考，具体如下：

anchor

#wei p{

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;

}

{{attr}}

• {{attr}}

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

}

}]);

运行效果如下：

点击锚点2：

点击锚点3：

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：