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. 在Excel VBA中将SQL查询的结果赋值给变量的方法

    直接上代码示例: nowdate为日期型变量 strSql = "select DISTINCT 日期 from new_ubi_data ORDER BY 日期 DESC Limit 0, ...

  2. Struts2:效验器——声明式

    就是用xml配置的方式,而不是Java代码的形式,那个是“编程式” Action: package org.ah.s2; import com.opensymphony.xwork2.ActionSu ...

  3. DMA控制

    1.S3C6410中DMA操作步骤 S3C6410中DMA操作步骤:1.决定使用安全DMAC(SDMAC)还是通用DMAC(DMAC):2.开始相应DMAC的系统时钟,并关闭另外一组的时钟(系统默认开 ...

  4. oracle计算是否是同一周

    函数已经解决跨年问题 select to_char(date'2016-12-31','iW') from dual; select to_char(date'2017-01-01','iW') fr ...

  5. iOS CoreAnimate 动画实现

    这里主要讲的是使用CoreAnimate实现所需的动画. 先上官网的介绍:https://developer.apple.com/library/ios/documentation/Cocoa/Con ...

  6. 两种open()函数

    C语言中文件操作函数中,open()有两种形式: 一种形式是有两个参数open2: 另一种形式是有三个参数open3: 共有的参数有两个,第一个是"被打开文件的路径",第二个是&q ...

  7. index()、e.target.value、on()与快捷处理的区别、

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. J2EE应用监控后台执行SQL

    我们可能已经很熟悉在未使用数据库连接池的hibernate的环境下,配置p6spy和sql profiler.这在单独使用hibernate,以及项目初期是有效的.但是,在真实的开发环境下,往往是项目 ...

  9. Visual Studio 2015 工具箱丢失

    网上主要的解答分为两种:1. 未打开设计界面 2. 重置 实际上,还有一个原因是,没有启动完整版的VS. 安装完后,会有两个VS的程序,一个是Blend For Visual Studio 2015, ...

  10. 解决openssl: error while loading shared libraries: libssl.so.1.1: cannot open shared object file: No such file or directory错误

    问题 在Centos7上编译安装openssl后,运行openssl version出现如下错误: openssl: error while loading shared libraries: lib ...