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实现ajax提交form表单的方法总结
Mar 03 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
详细分析React 表单与事件
Jul 08 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
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
Js四则运算函数代码
2012/07/21 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
js 调用百度分享功能
2017/02/27 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
毕业设计计划书
2014/01/09 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
微信早安问候语
2015/11/10 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python