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实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
js操作二进制数据方法
Mar 03 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 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 面试碰到过的问题 在此做下记录
2011/06/09 PHP
浅析PHP绘图技术
2013/07/03 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
jquery 年会抽奖程序
2011/12/22 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
留学自荐信
2013/10/10 职场文书
小区消防演习方案
2014/02/21 职场文书
先进个人事迹材料
2014/12/29 职场文书
校运会班级霸气口号
2015/12/24 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers