ui-router中的锚点问题(angular中的锚点问题)
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
官网文档传送门:https://docs.angularjs.org/api/ng/service/$anchorScroll
综上,angular对锚点做了处理,使用时先用$location.hash(),指定位置,hash的参数就是锚点id,然后再使用$anchorScroll()移动到锚点;
如果对用户体验有一定要求,则可能需要在跳转的过程中出现滚动的效果,angular中并没有提供这样的api,不过可以自己对照anchorScroll自定义,下面就是一个例子,可以直接使用到项目中
app.service('anchorSmoothScroll', function(){
this.scrollTo = function(eID) {
// This scrolling function
// is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY); return;
}
var speed = Math.round(distance / 100);
if (speed >= 20) speed = 20;
var step = Math.round(distance / 25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for ( var i=startY; i<stopY; i+=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY; timer++;
} return;
}
for ( var i=startY; i>stopY; i-=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
}
function currentYPosition() {
// Firefox, Chrome, Opera, Safari
if (self.pageYOffset) return self.pageYOffset;
// Internet Explorer 6 - standards mode
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
// Internet Explorer 6, 7 and 8
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
}
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}
};
});
原址:http://jsfiddle.net/brettdewoody/y65G5/
ui-router中的锚点问题(angular中的锚点问题)的更多相关文章
- angularjs中使用锚点,angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- Miniprofiler在swagger、vue、angular中的使用
本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...
- angular : $location & $state(UI router)的关系
次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- 在angular中利用分页插件进行分页
必需:angular分页js和css 当然还有angular.js 还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...
- ngRoute 与ui.router区别
angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
- AngularJS 使用 UI Router 实现表单向导
Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...
随机推荐
- 九、数据库——sql server 2008导入excel
昨天分配给我一个活,让我手动录入新闻网页的数据,包括每条新闻的标题.时间和链接. 一开始,就是按照最原始的手动录入的方法,一条条的录入.发现这简直就是在浪费时间,于是就想了一种新方法. 1.将网页中的 ...
- bzoj1051 [HAOI2006]受欢迎的牛
1051: [HAOI2006]受欢迎的牛 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4773 Solved: 2541[Submit][Sta ...
- HTML与CSS二三事
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
- WIn2003的IIS6解决IE11登录问题。
一键批处理文件下载:http://download.csdn.net/detail/hospp/6850835 1.打开文件夹C:\Windows\Microsoft.NET\Framework\v4 ...
- C++对象模型详解
原文链接:吴秦大神的C++对象模型. 何为C++对象模型? C++对象模型可以概括为以下2部分: 1.语言中直接支持面向对象程序设计的部分: 2.对于各种支持的底层实现机制. 语言中直接支持面向对象程 ...
- asp.net js 跨域方法二
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="view ...
- YCSB测试Mysql,MongoDB,TokuMX,Couchbase性能
测试是由同事完成的,这里只做收藏. 测试说明: 1.数据量为3kw记录,每条记录11个字段,一个为主键,主键为字符类型,类似:user****,后续为数值 其他10字段为字符类型,100字符,记录长度 ...
- Orcle基本语句(三)
COMMIT; --查询表内所有内容 SELECT * FROM stu_info; --查询部分列,并赋予别名 SELECT stu_id 学生标号,stu_name 学生姓名 FROM stu_i ...
- JAVA学习笔记(1-32)
1:数据的输入中,也需要提前声明变量.java区分大小写,注意保留字的问题,注意分号. 2:用import调用一个类.用new新建一个对象,相当于c中的malloc. 3:用final定义一个宏,相当 ...
- Orchard分类Taxonomies图文教程
Orchard分类和标签都实现对内容的分类管理,两者区别是分类的子项之间是具有级别(同级.上下级)关系,而标签是很随意的,子项之间可以有关系也可以没有,今天给大家分享分类的使用方法. 一.环境说明 O ...