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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
杨氏矩阵查找的JS代码
Mar 21 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
创建一个类Person的简单实例
May 17 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
浅谈js闭包理解
Apr 01 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
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的5个安全措施小结
2012/07/17 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
js获取页面description的方法
2015/05/21 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
微信小程序实现底部弹出框
2020/11/18 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python 函数中的参数类型
2020/02/11 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
python多进程使用函数封装实例
2020/05/02 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
Android笔试题总结
2014/11/29 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB