angular锚点服务 $anchorScroll

普通的html页面中,我们会通过在url后面添加#elementId的方式,将页面显示定位到某个元素上,也就是所谓的锚点。

但是在angular应用的页面上,页面路由的写法是#route/route,锚点会被当做一个页面路由解析过去,达不到定位的目的。angular提供了$anchorScroll用来提供锚点的功能。

用法:  $anchorScroll([hash])

当被调用的时候,页面会滚动到与元素相关联的指定的hash处,或者滚动到当前$location.hsh()处。

<div ng-controller="ScrollController">

  <a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom! </div>
angular.module('anchorScrollExample', [])

.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) { $scope.gotoBottom = function() { // 将location.hash的值设置为
// 你想要滚动到的元素的id
$location.hash('bottom'); // 调用 $anchorScroll()
$anchorScroll(); };
}]);

angular还提供了一种方式,用来获取路由 #后面的地址,用法:

$scope.$id;

jQuery也提供了锚点服务:

$('body,html').animate({ scrollTop: $('#bottom').offset().top }, 500);

随机推荐

  1. (1)StringBuilder类和StringBuffer类 (2)日期相关的类 (3)集合框架 (4)List集合

    1.StringBuilder类和StringBuffer类(查手册会用即可)1.1 基本概念 由于String类描述的字符串内容无法更改,若程序中出现大量类似的字符串时需要申请独立的内存空间单独保存 ...

  2. 转贴:C语言链表基本操作

    http://www.oschina.net/code/snippet_252667_27314#comments 这个代码有很多错误,估计是从老谭书上抄来但是很多还抄错了:对照老谭的书好好研究下.切 ...

  3. Mina使用总结(三)MinaClient

    简单的Mina客户端代码MinaSimpleClient.java: package com.bypay.mina.client; import java.net.InetSocketAddress; ...

  4. 预估高并发下API服务器数量

    我的主要工作就是API的编写,应该关注API的响应时间,以及并发时候的响应.那么如何测试API响应时间,以及预计高并发服务器压力呢? 从访问日志开始查起. 1 首先统计API每日访问总数.举例假设某个 ...

  5. nginx过一段时间出现400 Bad Request 错误的解决方法

    tomcat整合nginx成功后,等访问一段时间后,会出现 Bad Request (Invalid Hostname)的错误, 因为是已经成功的配置,所以判定可能是哪里的限制设置有问题,最后在官方网 ...

  6. ijcai statistics

  7. 用python解析word文件(二):table

    太长了,我决定还是拆开三篇写.   (一)段落篇(paragraph) (二)表格篇(table)(本篇) (三)样式篇(style) 选你所需即可.下面开始正文. 上一篇我们讲了用python-do ...

  8. nuxt 脚手架创建nuxt项目中不支持es6语法的解决方案

    node本身并不支持es6语法,我们通常在vue项目中使用es6语法,是因为,我们使用babel做过处理, 为了让项目支持es6语法,我们必须同时使用babel 去启动我们的程序,所以再启动程序中加 ...

  9. Docker实战(五)之端口映射与容器互联

    除了网络访问外,Docker还提供了两个很方便的功能来满足服务访问的基本需求:一个是允许映射容器内应用的服务端口到本地宿主主机;另一个是互联机制实现多个容器间通过容器名来快速访问. 1.端口映射实现访 ...

  10. IS服务器下做301永久重定向设置方法

    以前也没怎么关注301重定向,第一因为没有网站要重定向,第二对于不带www的域名我都是用的转发到带www的域名. 不过一场风波之后,很多服务商已经不提供转发服务了,虽说易名现在还可以享用到免费的转发服 ...