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中的锚点问题)的更多相关文章

  1. angularjs中使用锚点,angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  2. Miniprofiler在swagger、vue、angular中的使用

     本篇分为以下几个部分: 1.Swagger的简单应用 2.Miniprofier的后台配置 3.跨域配置 4.在angular中显示Miniprofier 5.在vue中显示Miniprofier ...

  3. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

  4. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  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 ...

  6. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

  7. 在angular中利用分页插件进行分页

    必需:angular分页js和css  当然还有angular.js   还需要bootstrap的css angular.min.js (下面我直接把插件粘贴上去了,以免有的同学还要去找.是不是很贴 ...

  8. ngRoute 与ui.router区别

    angular路由 路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...

  9. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

随机推荐

  1. JQuery -- this 和 $(this) 的区别

    this和$(this)都是指的调用它的东西,但this是一个Html 元素,例如给img标签设置src属性可以这样写 this.src= "test.jpg"; 但是如果将thi ...

  2. Linux 显示文件完整路径

    原链接 http://blog.chinaunix.net/uid-25266990-id-3268759.html ls foo | sed "s:^:`pwd`/:"

  3. 如何定位Sharepoint网站集所在的w3wp进程

     方法1.    直接开始运行,输入cmd,再输入iisapp可以列出当前所有IIS中的WebApplication所对应的w3wp.exe进程,后面都有一个进程号标识,在VS中调试的时候附加到对应进 ...

  4. leetcode-【hard】4. Median of Two Sorted Arrays

    题目 There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...

  5. oracle基础语法大全

    -----创建序列create sequence book_idINCREMENT BY 1 -- 每次加几个 START WITH 001 -- 从1开始计数 NOMAXVALUE -- 不设置最大 ...

  6. Pycharm注册码

    name : newasp===== LICENSE BEGIN =====09086-1204201000001EBwqd8wkmP2FM34Z05iXch1AkKI0bAod8jkIffywp2W ...

  7. delphi 类方法、类变量、类常量、类属性的研究,自己的研究

    群里我师傅给我的答案: unit Unit4; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Vari ...

  8. ASP.NET 常用状态(信息)保存方式

    服务器端:Session(会话)/ Application/ Caching(缓存)/DataBase(数据库) Session: Session: 常用于保存登录用户ID.验证码 不同的浏览器不能共 ...

  9. Delphi里如何让程序锁定在桌面上,win+d都无法最小化

    procedure TForm29.FormCreate(Sender: TObject); begin Windows.SetParent(Self.Handle, FindWindowEx(Fin ...

  10. {HDU}{2516}{取石子游戏}{斐波那契博弈}

    题意:给定一堆石子,每个人最多取前一个人取石子数的2被,最少取一个,最后取石子的为赢家,求赢家. 思路:斐波那契博弈,这个题的证明过程太精彩了! 一个重要的定理:任何正整数都可以表示为若干个不连续的斐 ...