$anchorScroll angular锚点服务

2021-10-23 23:45:55

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);

随机推荐

&period;net程序开发人员必看的变量的命名规则
(1)类名.属性名.方法名采用Pascal命名,如 class User { } interface IEditable { } bool ValidateInput() public int Age ...
Google的Protocol Buffer格式分析
[转]转自:序列化笔记之一:Google的Protocol Buffer格式分析从公开介绍来看,ProtocolBuffer(PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.作 ...
form表单提交不成功提示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
不是技术牛人，如何拿到国内IT巨头的Offer（转）
不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛人,NOI金牌,开源社区名人,三年级开始写Basic…在跪拜之余我们不禁要想,和这些牛人比,作为绝大部分技术屌 ...
Xamarin 安装步骤
原文:Xamarin 安装步骤 1.下载并解压吾乐吧软件站提供的“Mono for Android 离线包” 安装:jdk-6u45-windows-i586.exe (就算你是64位系统,也要安装i ...
使用puppet
首先配置一个默认文件只是首次创建的时候才需要重启,后期不需要重启! [root@master manifests]# vim /etc/puppet/manifests/site.pp node d ...
C库源码中的移位函数
#include <stdio.h> /* _lrotr()将一个无符号长整形数左循环移位的函数原形:unsigned long _lrotr(unsigned long value,i ...
Altium Designer PCB画板-交互式布局与模块化布局
交互式布局 (1)为了达到原理图与PCB两两交互,需要在原理图界面和PCB界面都执行菜单命令“Tools-Cross Select Mode”,选择交互按钮
九数组分数|2015年蓝桥杯B组题解析第五题-fishers
九数组分数 1,2,3...9 这九个数字组成一个分数,其值恰好为1/3,如何组法? 下面的程序实现了该功能,请填写划线部分缺失的代码. #include <stdio.h> void t ...
c++作业之圆面积
代码传送门

码农公寓

随机推荐

相关文章