前言:

之所以这么说,是因为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实现链接锚记的更多相关文章

  1. jQuery导航插件One-Page-Nav演示-显示命名锚记

    jQuery导航插件One-Page-Nav演示-显示命名锚记 简介 使用 选项 示例 推荐 简介 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固 ...

  2. ui-router中的锚点问题(angular中的锚点问题)

    angular.module('anchorScrollExample', []) .controller('ScrollController', ['$scope', '$location', '$ ...

  3. 帝国cms面包屑导航的首页链接锚文本改成关键字

    帝国cms面包屑导航的首页链接关键字一般都是“首页”二字或home,如果你想从这里提高锚文字的相关性,可以改成相应的关键字,那么如何来修改呢? 我们知道帝国CMS面包屑导航的变量是[!--newsna ...

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

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

  5. a 链接锚点

    建立锚点的元素必须要有 id 或 name 属性,最好两个都有. 锚点超链接一定包含井号 "#",锚点超链接都在链接的最末端,具体看后面例子: 同一个页面不同部分的跳转 目标元素: ...

  6. HTML基础--position 绝对定位 相对定位 锚点链接

    position 定位属性,检索对象的定位方式 一.语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位,对象遵循HTM ...

  7. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  8. JQuery 实现锚点链接之间的平滑滚动

    24. 解决链接锚点的生硬问题 $('.nav .btn[href*=#],.icon2,.icon3').click(function() { if (location.pathname.repla ...

  9. Angular1 基础知识 浅析(含锚点)

    1.angular:前端js框架  https://angularjs.org ① SPA单页应用程序 通过ajax从后台获取数据,动态渲染页面,不出现白屏,提高效率,节省流量 (1)锚点值 锚点:是 ...

随机推荐

  1. poi excel

    使用apache的poi包可以对excel进行操作读取和写入. 因excel分为xls的2003版和xlsx的2007版,poi在创建workbook时使用不同的类创建,因此需要注意区分xls. Wo ...

  2. Word Ladder 有必要深究。非图的广度优先遍历。标记

    感觉很生疏. https://leetcode.com/problems/word-ladder/

  3. 一套海量在线用户的移动端IM架构设计实践分享(含详细图文)(转)

    1.写在前面 1.1.引言 如果在没有太多经验可借鉴的情况下,要设计一套完整可用的移动端IM架构,难度是相当大的.原因在于,IM系统(尤其是移动端IM系统)是多种技术和领域知识的横向应用综合体:网络编 ...

  4. SQL 数据库开发一些精典的代码(转永南)

    1.按姓氏笔画排序: Select * From TableName Order By CustomerName Collate Chinese_PRC_Stroke_ci_as 2.数据库加密: s ...

  5. C语言复习:编译

    C接口的封装和设计专题 Win32环境下动态链接库(DLL)编程原理   比较大的应用程序都由很多模块组成,这些模块分别完成相对独立的功能,它们彼此协作来完成整个软件系统的工作.其中可能存在一些模块的 ...

  6. SQL Server 优化---为什么索引视图(物化视图)需要with(noexpand)强制查询提示

    本文出处:http://www.cnblogs.com/wy123/p/6694933.html 第一次通过索引视图优化SQL语句,以及遇到的一些问题,记录一下. 语句分析 最近开发递交过来一个查询统 ...

  7. Cache雪崩效应

    大概半年前,Guang.com曾发生一次由于首页部分cache失效,导致网站故障. 故障分析: 当时逛正在做推广,流量突然暴增,QPS达到5000+,当首页部分cache失效时,需要查询DB, 但由于 ...

  8. android布局管理器

    1 LinearLayout (线性布局) 让所有的组件都成为单一的方向,机垂直的或水平的(默认). android:Layout_weight //该属性控制水平和垂直方向某个控件所占比例. 2.F ...

  9. C++ vc中怎么使用SendMessage自定义消息函数

    vc中怎么使用SendMessage自定义消息函数: SendMessage的基本结构如下:SendMessage(    HWND hWnd,  //消息传递的目标窗口或线程的句柄.    UINT ...

  10. IT蓝豹强烈推荐:符合1-2年工作经验,开发中的难点及相关优化:

    IT蓝豹强烈推荐:符合1-2年工作经验,开发中的难点及相关优化: IT蓝豹 ------------------> sqlite数据库版本升级 1.sqlite升级步骤: 1.自己写一个类继承自 ...