angular实现链接锚记
前言:
之所以这么说,是因为angular的路由将html默认的链接锚记的#给占用了,所以传统的链接锚记在这里将不再适用,这个有点坑啊,又要多写好几行代码来模拟这个功能。
实现原理:
location.hash()是用来设置页面的标识,在单页应用里因为所有页面都集成到一个页面中,通过路由来实现页面片段的加载,这就需要这个location.hash()来区分。
示例代码:
HTML:
1. 链接锚记触发元素:
<li ng-click="clickLog(item)" ng-repeat="item in HotSiteList">{{item.dataName}}</li>
2. 链接锚记目标元素:
<div ng-repeat="l in letters" ng-if="trainSitesList">
<div class="site-panel-title padding-left graycolor" id="anchor{{l}}">{{l}}</div>
......
JS:
$scope.gotoAnchor = function(x) {
$location.hash('anchor' + x);
$anchorScroll();
}
如上,当点击列表项,触发gotoAnchor事件,就会跳转到对应id的div标签
angular实现链接锚记的更多相关文章
- jQuery导航插件One-Page-Nav演示-显示命名锚记
jQuery导航插件One-Page-Nav演示-显示命名锚记 简介 使用 选项 示例 推荐 简介 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固 ...
- ui-router中的锚点问题(angular中的锚点问题)
angular.module('anchorScrollExample', []) .controller('ScrollController', ['$scope', '$location', '$ ...
- 帝国cms面包屑导航的首页链接锚文本改成关键字
帝国cms面包屑导航的首页链接关键字一般都是“首页”二字或home,如果你想从这里提高锚文字的相关性,可以改成相应的关键字,那么如何来修改呢? 我们知道帝国CMS面包屑导航的变量是[!--newsna ...
- angularjs中使用锚点,angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- a 链接锚点
建立锚点的元素必须要有 id 或 name 属性,最好两个都有. 锚点超链接一定包含井号 "#",锚点超链接都在链接的最末端,具体看后面例子: 同一个页面不同部分的跳转 目标元素: ...
- HTML基础--position 绝对定位 相对定位 锚点链接
position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...
- H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- JQuery 实现锚点链接之间的平滑滚动
24. 解决链接锚点的生硬问题 $('.nav .btn[href*=#],.icon2,.icon3').click(function() { if (location.pathname.repla ...
- Angular1 基础知识 浅析(含锚点)
1.angular:前端js框架 https://angularjs.org ① SPA单页应用程序 通过ajax从后台获取数据,动态渲染页面,不出现白屏,提高效率,节省流量 (1)锚点值 锚点:是 ...
随机推荐
- day39-异常处理
一.程序中难免出现错误,而错误分成两种 1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 def test: pass ...
- 查看已打包app的entitlements文件内容
执行以下命令: codesign -d --ent :- /path/to/the.app https://developer.apple.com/library/content/technotes/ ...
- 【Noip模拟 20161005】友好城市
问题描述 小ww生活在美丽的ZZ国.ZZ国是一个有nn个城市的大国,城市之间有mm条单向公路(连 接城市ii.jj的公路只能从ii连到jj).城市ii.jj是友好城市当且仅当从城市ii能到达城市jj并 ...
- Flex_布局和容器
1.Halo组件也称MX组件,是Flex3的独有组件(按钮.文本字段.容器等).而Flex4引入了新一代的组件,称为Spark. Flex4同时支持Halo和Spark.但是很多Halo组件都有更 ...
- Structs复习 通配符
1.jar包 web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version= ...
- 法门扫地僧总结vue面试题(部分来源网络)
Front-End 前端开发工程师面试宝典! (本文部分有转载,不定期更新!) 前言(README.md) 本仓库是我整理的前端常见面试题,大部分由我整理,其中个别部分参考 ...
- 在iOS上使用ffmpeg播放视频
国外靠谱的有这几个:1.Mooncatventures group https://github.com/mooncatventures-group 2.KxMoviePlayer (use Open ...
- CMake Error at cmake/OpenCVModule.cmake:295 (message): No extra modules found in folder:Please provide path to 'opencv_contrib/modules' folder
其实,我们使用的opencv中要用的contrib/modules 是需要额外下载并在cmakelists.txt中指定的 git clone https://github.com/opencv/ ...
- WebAPI 和 webservice接口
1. webservice走HTTP协议和80端口.WebService则类似于bs架构,只需要开发服务器端,不需要开发客户端,客户端只要遵循soap协议,就可以调用. 2. api,用的协议和端口, ...
- Struts 框架
struts简介 Struts是Apache软件基金会(ASF)赞助的一个开源项目.它最初是jakarta项目中的一个子项目,并在2004年3月成为ASF的顶级项目.它通过采用JavaServlet/ ...