AngularJs中锚点的使用,及锚点偏移量设置
2015-12-24 14:31
686 查看
AngularJs中关于锚点的使用,及锚点偏移量设置
有很多人在使用ng-view时都用到了#号做route,所以如果在页面上需要用到锚点的时候就会比较头疼了。这个时候可以使用ng的anchorScroll。
使用了ng的anchorScroll后确实可以达到锚点跳转的作用了,但是问题又来了,我如果页面有一个标题栏这个锚点的跳转就不准确了,此时则需要设置偏移量了。
使用函数:
如果设置,指定一个垂直滚动偏移。这通常是有用的,当有在页面的顶部有“fixed”定位的元素,如导航栏,标题等
可以以各种方式来指定:
number: 要用作偏移像素的固定数量。
function: 每次
jqLite: 一个jqLite/ jQuery的元素用于指定偏移量。从页面的元素的顶部到底部的距离将被用作偏移。
Note: 该元素只要其
为了
示例代码:
HTML代码:
附上AngularJs的官方Api
参考资料:https://docs.angularjs.org/api/ng/service/$anchorScroll
有很多人在使用ng-view时都用到了#号做route,所以如果在页面上需要用到锚点的时候就会比较头疼了。这个时候可以使用ng的anchorScroll。
使用了ng的anchorScroll后确实可以达到锚点跳转的作用了,但是问题又来了,我如果页面有一个标题栏这个锚点的跳转就不准确了,此时则需要设置偏移量了。
使用函数:
$anchorScroll([hash]);
Param | Type | Details |
---|---|---|
hash (optional) | string | The hash specifying the element to scroll to. If omitted, the value of $location.hash() will be used. |
yOffset
可以以各种方式来指定:
number: 要用作偏移像素的固定数量。
function: 每次
$anchorScroll()函数执行完毕,必定返回一个数字,代表偏移量(以像素为单位)。
jqLite: 一个jqLite/ jQuery的元素用于指定偏移量。从页面的元素的顶部到底部的距离将被用作偏移。
Note: 该元素只要其
position被设置为
fixed。当响应导航栏/头,根据视口大小调整高度和/或定位时,使用此选项很有用。
为了
yOffset正常工作,滚动应写在文档的根而不是一些子元素。
示例代码:
angular.module('myApp', ['ngRoute']) .run(['$anchorScroll', function($anchorScroll) { $anchorScroll.yOffset = 50; // 默认向下便宜50px // 在此处配置偏移量 }]) .controller('View1Ctrl', ['$scope', '$location', '$anchorScroll', function ($scope, $location, $anchorScroll) { $scope.demo = function () { $location.hash('test'); $anchorScroll(); //移动到锚点 }; }]);
HTML代码:
<div class="center main-text"> <br><br> <a href="" ng-click="demo();">hahah</a> <!--执行demo()函数跳转到锚点--> <p id="test">Welcome to SaLibs.</p> <!--此处设置id--> <!--一下部分为了增加HTML代码的长度,并无实际意义--> <a>This is the partial for view 1.</a> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <p>This is the partial for view 1.</p> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br> <p>This is the partial for view 1.</p> </div>
附上AngularJs的官方Api
参考资料:https://docs.angularjs.org/api/ng/service/$anchorScroll
相关文章推荐
- angular学习日志04 购物车!
- AngularJs数据渲染到视图后再执行操作
- MEANjs Angularjs NgTable Mongo
- angular学习日志03 Hello,World
- AngularJS学习资料
- 定制Directives
- AngularJS权威教程 第7章 过滤器filters
- Gradle+Jersey+AngularJs图片上传功能后台代码
- 在angular2服务中注入服务
- Angular 2模板语法
- Angular 2的核心概念
- Angular 2的变化检测
- Angular 2模板语法
- Angular 2中的依赖注入
- 在angular2服务中注入服务
- Angular 2中的依赖注入
- Angular 2模板语法
- Angular 2的变化检测
- Angular 2的核心概念
- Angular Provider Factory Service