How to implement jump function in AngularJS
This article mainly introduces the anchor point floor jump function implemented by AngularJS, and involves the related operating skills of AngularJS event response to implement the anchor point jump function. Friends in need can refer to the following
The examples in this article are described Anchor point floor jump function implemented by AngularJS. Share it with everyone for your reference, the details are as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>anchor</title>
<style>
#wei p{
width:100%;
height:720px;
background: red;
color:#fff;
text-align:center;
line-height: 720px;
margin:20px;
font-size: 80px;
}
#wei ul{
position: fixed;
top:300px;
right:60px;
}
#wei ul li{
width:20px;
display:block;
height:20px;
background: gray;
color:#fff;
text-align:center;
line-height: 20px;
border-radius: 50%;
margin-bottom: 20px;
cursor: pointer;
}
</style>
</head>
<body ng-controller="show">
<p id="wei">
<p ng-repeat="attr in arr" ng-attr-id="p{{attr}}">{{attr}}</p>
<ul><!-- 定义右边的点 -->
<li ng-repeat="attr in arr" ng-click="jump('p'+attr)">{{attr}}</li>
</ul>
</p>
<script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller('show',['$scope','$location','$anchorScroll',function($scope,$location,$anchorScroll){
$scope.arr=[1,2,3,4,5];
$scope.jump=function(id){
//console.log(id);
$location.hash(id);//添加锚点
$anchorScroll(); //重新定义服务,解决当滑动时点击锚点无作用的bug
}
}]);
</script>
</body>
</html>The running effect is as follows:
Click on the anchor point 2:
Click on the anchor point 3:
#The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to configure multi-site vhost in Nginx
How to implement background data sending in express mockjs
Use mock.js to generate random data
The above is the detailed content of How to implement jump function in AngularJS. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
The latest 5 angularjs tutorials in 2022, from entry to mastery
Jun 15, 2017 pm 05:50 PM
Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".
Recommended lineup for Anchor Point Arrival ice team
Feb 20, 2024 pm 12:57 PM
Anchor Arrival is a 3D future sci-fi themed RPG card game. It has a wealth of wonderful characters waiting for players to explore and collect. The characters also have different series attributes, in which players can form corresponding ice lineups. This issue brings you some collocation reference for the Anchor Point Advent ice team lineup! Anchor Point Advent ice team lineup recommendation 1. Ice system: 1. Frost effect: There are 2 players with frost characteristics in the formation, and the attack will be improved. 2.5%+16. For 3 combatants with frost characteristics, the damage aggravation is increased by 4%. 2. Faction analysis: Currently, the main ice system in the game is that the single card ability of SSR is relatively strong, but other characters are not so ideal, so the general deployment of troops is divided into three directions. They are 1 ice + other characters, 2 ice + 3 light,
Use PHP and AngularJS to build a responsive website to provide a high-quality user experience
Jun 27, 2023 pm 07:37 PM
In today's information age, websites have become an important tool for people to obtain information and communicate. A responsive website can adapt to various devices and provide users with a high-quality experience, which has become a hot spot in modern website development. This article will introduce how to use PHP and AngularJS to build a responsive website to provide a high-quality user experience. Introduction to PHP PHP is an open source server-side programming language ideal for web development. PHP has many advantages, such as easy to learn, cross-platform, rich tool library, development efficiency
How to complete dispatch missions in Anchor Point Advent
Feb 20, 2024 pm 03:06 PM
Anchor Arrival is a high-quality 3D card game with many strategies and development content. It has designed rich dispatch-related contents. The operation of dispatch tasks also has a certain process. Once players are familiar with it, it will be relatively simple to operate. Some new players may not be familiar with this content, so let’s take a look at how to operate dispatch tasks in Anchor Point Advent! Introduction to the operation method of dispatch tasks in Anchor Point Advent 1. The dispatch tasks in the game require the player level to reach certain requirements before they will appear. , when the player's beacon level reaches level 3 or 4, the dispatched device will appear. 2. Players can complete the dispatch task by clicking on the device dispatch. In the task list, the number and requirements of the characters to be dispatched can be viewed. Selecting the appropriate character dispatch can improve the success rate. 3. The dispatch task is completed
How to achieve smooth scrolling to anchor position using CSS
Nov 21, 2023 pm 03:28 PM
How to use CSS to achieve smooth scrolling to the anchor position. In web design, the anchor position refers to a specific position on the page. When the user clicks a link in the page, the page will smoothly scroll to that position. This effect not only brings a good user experience, but also improves the beauty of the page. This article will introduce how to use CSS to achieve smooth scrolling to the anchor point position, and give specific code examples. 1. HTML structure First, we need to set anchor points in HTML. Add an id attribute to the position where you need to scroll smoothly as the anchor point.
Build web applications using PHP and AngularJS
May 27, 2023 pm 08:10 PM
With the continuous development of the Internet, Web applications have become an important part of enterprise information construction and a necessary means of modernization work. In order to make web applications easy to develop, maintain and expand, developers need to choose a technical framework and programming language that suits their development needs. PHP and AngularJS are two very popular web development technologies. They are server-side and client-side solutions respectively. Their combined use can greatly improve the development efficiency and user experience of web applications. Advantages of PHPPHP
Build a single-page web application using Flask and AngularJS
Jun 17, 2023 am 08:49 AM
With the rapid development of Web technology, Single Page Web Application (SinglePage Application, SPA) has become an increasingly popular Web application model. Compared with traditional multi-page web applications, the biggest advantage of SPA is that the user experience is smoother, and the computing pressure on the server is also greatly reduced. In this article, we will introduce how to build a simple SPA using Flask and AngularJS. Flask is a lightweight Py
How to use AngularJS in PHP programming?
Jun 12, 2023 am 09:40 AM
With the popularity of web applications, the front-end framework AngularJS has become increasingly popular. AngularJS is a JavaScript framework developed by Google that helps you build web applications with dynamic web application capabilities. On the other hand, for backend programming, PHP is a very popular programming language. If you are using PHP for server-side programming, then using PHP with AngularJS will bring more dynamic effects to your website.
