angularJs中跳转到指定的锚点实例($anchorScroll)


Posted in Javascript onAugust 31, 2018

$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)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之Helloworld
Dec 22 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 #Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 #Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 #Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 #Javascript
Bootstrap模态对话框用法简单示例
Aug 31 #Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 #Javascript
You might like
解析PHP高效率写法(详解原因)
2013/06/20 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python提取字典key列表的方法
2015/07/11 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Python装饰器原理与用法分析
2018/04/30 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python同步windows和linux文件
2019/08/29 Python
python机器学习库xgboost的使用
2020/01/20 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
空指针到底是什么
2012/08/07 面试题
男方父母证婚词
2014/01/12 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
统招统分证明
2015/06/23 职场文书
驻村工作简报
2015/07/20 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
java调用Restful接口的三种方法
2021/08/23 Java/Android