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 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
vue实现计算器功能
Feb 22 Javascript
序列化模块json代码实例详解
Mar 03 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
react组件基本用法示例小结
Apr 27 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 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
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python切片操作深入详解
2018/07/27 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
医院总经理岗位职责
2014/02/04 职场文书
统计学教授推荐信
2014/09/18 职场文书
感谢信的格式
2015/01/21 职场文书
个人党性分析总结
2015/03/05 职场文书
感动中国何玥观后感
2015/06/02 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS