angularJs中跳转到指定的锚点实例($anchorScroll)
$anchorScroll
根据HTML5的规则，当调用这个函数时，它检查当前的url的hash值并且滚动到相应的元素。
监听$location.hash()并且滚动到url指定的锚点的地方。
可以通过$anchorScrollProvider.disableAutoScrolling()禁用。
依赖：$window $location $rootScope
使用：$anchorScroll([hash]);hash 将会指定元素滚动到的位置，如果省略参数，则将使用$location.hash() 作为默认值。
属性：number function(){} jqLite
如果设置了这个值，将会指定一个垂直的滚动的偏移量。这种场景经常用于在页面顶部有固定定位的元素, 如导航条，头部等（让出头部空间）。
yOffset 可以用多种途径指定:
- number : 一个固定的像素值可以使用（无单位）。
- function : 每次$anchorScroll()执行时这个函数都会被调用，它必须返回一个代表位移的数字（无单位像素值）。
jqLite : 一个jqLite/jQuery元素可以被指定为位移值。这个位移值会取页面的顶部到该元素底部的距离。
注意：只有有元素的定位方式是固定定位时才会应该被纳入考虑之中。这个设置 在响应式的导航条/头部需要调整他们的高度亦或 根据视图来定位时很有用处。
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <div id="top" ng-click="ctrl.gotoBottom()">跳到底部</div> <div id="bottom" ng-click="ctrl.gotoTop()">跳到顶部</div> </div>
(function () {
angular.module("Demo", [])
.controller("testCtrl",["$location", "$anchorScroll",testCtrl]);
function testCtrl($location,$anchorScroll){
this.gotoTop = function () {
$location.hash("top");
$anchorScroll();
};
this.gotoBottom = function () {
$location.hash("bottom");
$anchorScroll();
};
};
}());
以上这篇angularJs中跳转到指定的锚点实例($anchorScroll)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
es6+angular1.X+webpack 实现按路由功能打包项目的示例
本篇文章主要介绍了es6+angular1.X+webpack 实现按路由功能打包项目的示例，具有一定的参考价值，有需要的可以了解一下2017-08-08
本文对angularjs的filter过滤器进行系统介绍，附上实例解析，便于理解。具有很好的参考价值，需要的朋友可以看下2016-12-12
AngularJS全局scope与Isolate scope通信用法示例
这篇文章主要介绍了AngularJS全局scope与Isolate scope通信用法,结合格式分析了全局scope和directive本地scope相关功能、通信用法与相关注意事项,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了详细解读AngularJS中的表单验证编程,AngularJS是一个非常热门的JavaScript库,需要的朋友可以参考下2015-06-06
这篇文章主要给大家介绍了关于使用Angular Cli如何创建Angular私有库的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
本篇文章主要介绍了Angularjs 动态添加指令并绑定事件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了AngularJS的Cookies读写操作,结合实例形式分析了ngCookies模块与get和put方法进行cookie读写操作的相关实现技巧,需要的朋友可以参考下2016-11-11
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。这篇文章主要带着大家理解Angular数据双向绑定，感兴趣的小伙伴们可以参考一下2016-01-01
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
这篇文章主要跟大家介绍了关于Angular4项目中添加i18n国际化插件ngx-translate的步骤，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要给大家介绍了关于Angular 2+时如何去除url中#号的相关资料，文中先对#号去除的原因及方法进行详细的介绍和分析，然后通过示例代码给大家演示去除的方法，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。2017-12-12
最新评论