200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > angularJs通过服务 $anchorScroll()和 $location.hash()实现锚点滚动效果

angularJs通过服务 $anchorScroll()和 $location.hash()实现锚点滚动效果

时间:2020-03-22 13:27:36

相关推荐

angularJs通过服务 $anchorScroll()和 $location.hash()实现锚点滚动效果

其中关于$location.hash();

例如 http://localhost:xxx//index.html?_ijt=5692t33a96k7a9lee2n02f6pjs##div6

#代表网页中的一个位置,#后边的部分就是该位置的标识符。浏览器读取这个URL后,会自动将div6位置滚动至可视区域。

详解见 /blog//03/url_hash.html

案例代码见下文。

<!DOCTYPE html><html lang="en" ng-app="app"><head><meta charset="UTF-8"><title>通过服务 $anchorScroll()和 $location.hash()实现锚点滚动 </title><style>ul{ width: 80px;height: auto;position: fixed;top: 0;right: 10px;}li{ height: 34px;line-height: 34px;text-align: center;border: 1px solid black;list-style: none;}div{width: 600px; height: 330px; border: 1px solid black;margin-top: 10px;margin-left: 250px; background-color: #2f96b4;}</style><script src="../js/angular.min.js"></script><script>var app = angular.module('app',[]);app.controller('ctrl',function($scope,$location,$anchorScroll){$scope.arr = [1,2,3,4,5,6];$scope.change = function (id) {$location.hash(id);//例如 http://localhost:xxx//index.html?_ijt=5692t33a96k7a9lee2n02f6pjs##div6//#代表网页中的一个位置。其右面的字符,#后边的部分就是该位置的标识符。浏览器读取这个URL后,会自动将div6位置滚动至可视区域。//详解见 /blog//03/url_hash.html$anchorScroll();}});</script></head><body ng-controller="ctrl"><ul><li ng-repeat="id in arr" ng-click="change('div'+id)">div{{id}}</li></ul><div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。