angularJS-实现锚点跳转实例

最新推荐文章于 2025-03-12 11:14:17 发布
最新推荐文章于 2025-03-12 11:14:17 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36898102/article/details/77825830
版权 
<!DOCTYPE html>
<html ng-app = "myPro">
	<head>
		<meta charset="UTF-8">
		<title>angularJS_实现锚点跳转实例</title>
		<script src="js/angular.min.js"></script>
		<script src="js/jquery-1.11.0.js"></script>
		<style>
			*{padding: 0;margin: 0;}
			ul,ol{list-style: none;}
			body{background-color: #414246;}
			::-webkit-scrollbar{width: 7px;height: 4px;}
			::-webkit-scrollbar-track{border-radius:0 ;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.1);}
			::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}
			.box{width: 800px;height: 500px;border: 1px solid #000000;margin: 100px auto;background-color: #373a3f;color: #a1a6a7;font-size: 12px;}
			.box .box-header{width: 790px;height:40px;border: 1px solid #000000;padding: 10px 0 0 10px;font-size: 14px;}
			.box .box-header ul li{float: left;margin: 0 8px;line-height: 40px;font-size: 16px;cursor: pointer;}
			.box .box-header ul li.on{color: #0088cc;text-shadow: 0 0 6px #808080;cursor: pointer;}
			.box .box-main{width: 790px;height: 440px;padding: 10px 0 0 10px;overflow-y:auto;}
			.box .box-main ul .first_li{width:100%;height: 100px;}
			.box .box-main ul .first_li .initials{width:100%;height: 20px;line-height: 20px;background-color: #3f4045;}
			.box .box-main ul .first_li .position{width:100%;}
			.box .box-main ul .first_li .position ul li{width:50px;height: 20px;line-height: 20px; float: left;text-align: center;margin: 20px;}
		
		
		</style>
	</head>
	<body ng-controller = "myProController">
		<div class="box">
			<div class="box-header">
				<ul choice-channel-jump>
					<li ng-class="{'on':charArray.other}">#</li>
					<li ng-class="{'on':charArray.A}">A</li>
					<li ng-class="{'on':charArray.B}">B</li>
					<li ng-class="{'on':charArray.C}">C</li>
					<li ng-class="{'on':charArray.D}">D</li>
					<li ng-class="{'on':charArray.E}">E</li>
					<li ng-class="{'on':charArray.F}">F</li>
					<li ng-class="{'on':charArray.G}">G</li>
					<li ng-class="{'on':charArray.H}">H</li>
					<li ng-class="{'on':charArray.I}">I</li>
					<li ng-class="{'on':charArray.J}">J</li>
					<li ng-class="{'on':charArray.K}">K</li>
					<li ng-class="{'on':charArray.L}">L</li>
					<li ng-class="{'on':charArray.M}">M</li>
					<li ng-class="{'on':charArray.N}">N</li>
					<li ng-class="{'on':charArray.O}">O</li>
					<li ng-class="{'on':charArray.P}">P</li>
					<li ng-class="{'on':charArray.Q}">Q</li>
					<li ng-class="{'on':charArray.R}">R</li>
					<li ng-class="{'on':charArray.S}">S</li>
					<li ng-class="{'on':charArray.T}">T</li>
					<li ng-class="{'on':charArray.U}">U</li>
					<li ng-class="{'on':charArray.V}">V</li>
					<li ng-class="{'on':charArray.W}">W</li>
					<li ng-class="{'on':charArray.X}">X</li>
					<li ng-class="{'on':charArray.Y}">Y</li>
					<li ng-class="{'on':charArray.Z}">Z</li>
				</ul>
			</div>
			<div class="box-main">
				<ul>
					<li class="first_li" ng-repeat="data in positionDatas" id="{{data.letter=='#'?'other':data.letter}}">
						<p class="initials">{{data.letter}}</p>
						<div class="position">
							<ul>
								<li ng-repeat = "d in data.title track by $index">
									<p>{{d.name}}</p>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script>
		var pro = angular.module("myPro",[]);
		pro.controller("myProController",["$scope",function($scope){
			var data = [
				{"letter":"#","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"A","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"B","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"C","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"D","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"E","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"F","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"G","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"H","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"I","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"J","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"K","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"L","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"M","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"N","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"O","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"P","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"Q","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"R","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"S","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"T","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"U","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"V","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"W","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"X","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"Y","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]},
				{"letter":"Z","title":[{"name":"张三"},{"name":"李四"},{"name":"周吴"},{"name":"郑王"}]}
			];
			$scope.positionDatas = data;
			$scope.charArray = {
				A:false,
				B:false,
				C:false,
				D:false,
				E:false,
				F:false,
				G:false,
				H:false,
				I:false,
				J:false,
				K:false,
				L:false,	
				M:false,
				N:false,
				O:false,
				P:false,
				Q:false,
				R:false,	
				S:false,
				T:false,
				U:false,
				V:false,
				W:false,
				X:false,
				Y:false,
				Z:false,
				other:false
			};
			angular.forEach($scope.positionDatas,function(i){
				if(i.letter=="#"){
					$scope.charArray.other = true;
				}else{
					$scope.charArray[i.letter] = true;
				};
			})
			
		}]);
		pro.directive("choiceChannelJump",[function(){
			return{
				restrict:"A",
				link:function(scope,element,attr){
					var parent = $(".box-main");
					var obj = $(element);
					obj.find("li").click(function(){
						var _this = $(this);
						var text = _this.text();
						console.log(text);
						if(text=="#"){
							text = "other";
						};
						if(_this.hasClass('on')){
							parent.animate({scrollTop:$('#'+text).offset().top-parent.offset().top+parent.scrollTop()+'px'})
						}
					});
				}
			}
		}]);		
	</script>
</html>









                

        

    

  



    


                



	

		

			

				
					
优乐商城04-2 ES6 Vue

				
			

			

				

					m0_45209551的博客
				

				

					02-24
					
					240
					
				

			

		

		

			
				
学习目标

 会创建Vue实例，知道Vue的常见属性
	 会使用Vue的生命周期的钩子函数
	 会使用vue常见指令
	 会使用vue计算属性和watch监控
	 会编写Vue组件
	 掌握组件间通信
	 了解vue-router使用
0.前言

前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端的一些技术，完成前端页面搭建...

			
		

	



                

            
              



	

		

			

				
					
产品经理的技术字典

				
			

			

				

					林秀成
				

				

					01-07
					
					1552
					
				

			

		

		

			
				
产品经理需要懂技术吗？


			
		

	



              


  
              

                


	

		

			

				
					
angularJs中跳转到指定的锚点实例($anchorScroll)

				
			

			

				

					10-18
				

			

		

		

			
				
今天小编就为大家分享一篇angularJs中跳转到指定的锚点实例($anchorScroll)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
angular跳转指定页面_angularJs中跳转到指定的锚点实例($anchorScroll)

				
			

			

				

					weixin_39604557的博客
				

				

					12-22
					
					469
					
				

			

		

		

			
				
$anchorscroll根据html5的规则，当调用这个函数时，它检查当前的url的hash值并且滚动到相应的元素。监听$location.hash()并且滚动到url指定的锚点的地方。可以通过$anchorscrollprovider.disableautoscrolling()禁用。依赖：$window $location $rootscope使用：$anchorscroll([hash])...

			
		

	



		

			
		



	

		

			

				
					
AngularJS全栈入门代码示例与教程

					
最新发布

				
			

			

				

					weixin_36078669的博客
				

				

					03-12
					
					808
					
				

			

		

		

			
				
本文还有配套的精品资源，点击获取
 
 


 简介：AngularJS是Google开发的一个前端JavaScript框架，特别适合构建单页应用。本资源包"小猫杯"包含AngularJS的全套学习材料，涵盖了数据绑定、依赖注入、指令系统等核心特性，以及控制器、服务、模块系统等高级功能。它还包括路由设置、单元测试、MVC模式和版本迭代等重要知识点。通过这些代码示例和实践项目，初学者可以快...

			
		

	





	

		

			

				
					
[Angularjs]锚点操作服务$anchorScroll

				
			

			

				

					weixin_33825683的博客
				

				

					03-22
					
					168
					
				

			

		

		

			
				
写在前面
有个单页应用的项目中，需要通过锚点进行页面的定位。但angularjs的路由会出现跟锚点冲突，angularjs会将锚点当成路由进行解析，造成跳转到这个页面，而我们需要的只是跳转到当前的锚点位置。angularjs的路由格式#/home/en。比如锚点的id为navigate-label，当触发跳转到锚点时，会出现#/navigate-label.
解决办法
angularjs提供...

			
		

	





	

		

			

				
					
AngularJS 锚点

				
			

			

				

					KingCruel的专栏
				

				

					03-22
					
					839
					
				

			

		

		

			
				
1、html

    
    消息


    
        锚点
        1234567890
        1234567890
        1234567890
        
            bottombottombottombottombottombottombottombottombottombottombottombo
            bo

			
		

	





	

		

			

				
					
Angular中锚点的写法

				
			

			

				

					AC总有一天的博客
				

				

					12-13
					
					1564
					
				

			

		

		

			
				
普通页面中的写法


<a href="#id">跳转</a>
<div id="id">指定位置</div>

此方法在angular中是失效的，因为此写法跟路由冲突

解决方案一：（不推荐）


//html:
<a (click)="goDetail('id')">跳转</a>
<div id="id">指定...

			
		

	





	

		

			

				
					
AngularJS实现路由实例

				
			

			

				

					10-20
				

			

		

		

			
				
通过这样的配置，我们创建了一个基本的AngularJS路由应用，实现了页面间的跳转和内容动态加载。这只是一个简单的实例，实际应用中，路由通常会与控制器、服务等组件结合，处理更复杂的业务逻辑和数据管理。理解并...

			
		

	





	

		

			

				
					
AngularJS实现的锚点楼层跳转功能示例

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
Angular中锚点的几种方法

				
			

			

				

					简单Cere
				

				

					05-06
					
					8402
					
				

			

		

		

			
				
项目现象：在静态页面中往往需要点击某个按钮跳转到当前页面的某个地方

实现：

方法一：（不推荐）

页面:


<button (click)="goDistance('distannce2')">跳转到2</button>
<div id="distannce1" style="width:500px;height:500px;background:red"&gt...

			
		

	





	

		

			

				
					
angularJs中跳转到指定的锚点详解($anchorScroll)

				
			

			

				

					js_admin的博客
				

				

					05-11
					
					7101
					
				

			

		

		

			
				
$anchorScroll
根据HTML5的规则，当调用这个函数时，它检查当前的url的hash值并且滚动到相应的元素。
监听$location.hash()并且滚动到url指定的锚点的地方。
可以通过$anchorScrollProvider.disableAutoScrolling()禁用。
依赖：$window   $location   $rootScope
使用：$anchor

			
		

	





	

		

			

				
					
angularjs锚点的使用

				
			

			

				

					weixin_33794672的博客
				

				

					06-06
					
					197
					
				

			

		

		

			
				
有很多人在使用ng-view时都用到了#号做route，所以如果在页面上需要用到锚点的时候就会比较头疼了。这个时候可以使用ng的anchorScroll，也可以使用jsGen中封装的anchorScroll。推荐使用jsGen中的anchorScroll。
services.js
.factory('anchorScroll', function () {
    function toVi...

			
		

	





	

		

			

				
					
angular路由两种锚点

				
			

			

				

					fuckof的博客
				

				

					09-23
					
					3867
					
				

			

		

		

			
				
1.第一种








首页
详情页
购物车
个人中心






var my = angular.module('myApp',['ngRoute']);
my.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/aaa',{
template : 

			
		

	





	

		

			

				
					
angularjs 锚点操作服务 $anchorScroll

				
			

			

				

					weixin_30496751的博客
				

				

					12-08
					
					118
					
				

			

		

		

			
				
在普通的html网页中，我们可以通过在url后边添加 #elementid 的方式，将页面显示定位到某个元素，也就是锚点。
但是在angularjs应用的网页中，页面路由的写法是 #route/route  锚点的写法会被当做一个页面路由解析过去，达不到定位的目的。
angular提供一个$anchorScroll 用来做锚点的功能。
用法如下：


$scope.g...

			
		

	





	

		

			

				
					
angularJs通过服务 $anchorScroll()和 $location.hash()实现锚点滚动效果

				
			

			

				

					Keep moving on.
				

				

					11-07
					
					862
					
				

			

		

		

			
				
 

其中关于$location.hash();

例如 http://localhost:xxx//index.html?_ijt=5692t33a96k7a9lee2n02f6pjs##div6
 #代表网页中的一个位置，#后边的部分就是该位置的标识符。浏览器读取这个URL后，会自动将div6位置滚动至可视区域。
详解见 http://www.ruanyifeng.com/blog/2011/...

			
		

	





	

		

			

				
					
AngularJs中锚点的使用，及锚点偏移量设置

					
热门推荐

				
			

			

				

					史安琪的博客
				

				

					12-24
					
					1万+
					
				

			

		

		

			
				
AngularJs中锚点的使用，锚点偏移量
$anchorScroll();

			
		

	





	

		

			

				
					
Angular-cli （Angular2+）的锚点使用

				
			

			

				

					Ruuush_B的博客
				

				

					07-29
					
					687
					
				

			

		

		

			
				
Angular-cli使用锚点
在Angular中，html自带的a标签 # 锚点已经转换成其他意义。因此想要使用锚点实现楼层跳转需要其他方法。
方法1：（推荐）
首先，在app-routing-module.ts （路由配置）文件中，在Import的routes后面加入一个**{ anchorScrolling: ‘enabled’ }**

然后，回到你组件的html文件，在你想要使用锚点的a标签内容中，加入  routerLink=" (/本页面的路由) "  [fragment]=" (想去的标签的

			
		

	





	

		

			

				
					
angularjs路由与锚点

				
			

			

				

					cry
				

				

					04-08
					
					394
					
				

			

		

		

			
				
使用angularjs路由时，


config(["$locationProvider", function ($locationProvider) {
            $locationProvider.hashPrefix("");
            $locationProvider.html5Mode({
                rewriteLinks: fals...

			
		

	





	

		

			

				
					
微信小程序scroll-view锚点跳转实现

				
			

			

				

					
				

			

		

		

			
				
在这个示例中，我们看到如何结合`scroll-view`实现锚点链接滚动跳转的功能，这在用户界面导航和数据展示中具有广泛的应用。  首先，让我们分析一下给出的HTML部分。有两个主要的`view`组件和一个`scroll-view`组件。...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值