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 相关文章推荐
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
解析php中获取系统信息的方法
2013/06/25 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
python3 配置logging日志类的操作
2020/04/08 Python
python爬虫请求头设置代码
2020/07/28 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
消防安全管理制度
2014/02/01 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
加强作风建设工作总结
2014/10/23 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
创业计划书之农家乐
2019/10/09 职场文书
win10下go mod配置方式
2021/04/25 Golang
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
Win10 Anaconda安装python-pcl
2022/04/29 Servers