Approach 1: Using AngularJS Controllers (using ‘$location‘ and ‘$anchorScroll‘ services)
In this approach, we have created a smooth-scrolling one-page application. Here, the AngularJS controller, which is “MainController” is actually responsible for completely managing the scrolling behaviors in the application. We have used 2 different services which are ‘$location‘ and ‘$anchorScroll‘, using this we can properly handle anchor hash linking and provide an efficient navigation experience in the application. When we click on the navigation link, the controller’s function updates its active section, and adjusts the URL hash, then we can scroll the page to the desired data.
Example: Below is an example that showcases the handling of anchor hash linking in AngularJS.
HTML
<!--index.html--> <!DOCTYPE html> <html ng-app="myApp"> <head> <title> AngularJS Hash Linking Example (Approach 1) </title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body ng-controller="MainController"> <div class="container"> <div class="header"> <h2 class="geeks-title"> w3wiki </h2> <h3>AngularJS Hash Linking</h3> </div> <div class="navbar"> <a class="nav-link" ng-repeat="item in items" ng-href="#{{item.id}}" ng-click="scrollToItem(item.id)"> {{item.name}} </a> </div> <div class="content"> <div class="item" ng-repeat="item in items" id="{{item.id}}" ng-class="{ 'active': activeItemId === item.id }"> <h4>{{item.name}}</h4> <div class="description"> {{item.description}} </div> </div> </div> </div> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> </script> <script src="app.js"></script> </body> </html> |
CSS
/* styles.css */ body, h2, h3, ul, li { margin: 0; padding: 0; } .container { font-family: Arial, sans-serif; margin: 0 auto; max-width: 800px; padding: 20px; box-sizing: border-box; } .header { text-align: center; margin-bottom: 20px; } .navbar { background-color: #f5f5f5; padding: 10px; text-align: center; display: flex; justify-content: center; } .nav-link { margin: 0 10px; cursor: pointer; } .item { margin-bottom: 50px; border: 1px solid #ccc; padding: 10px; transition: background-color 0.3s ease-in-out; } .item.active { background-color: #ffeeba; } .description { margin-top: 10px; font-size: 14px; } .geeks-title { color: green; } |
Javascript
// script.js var app = angular.module('myApp', []); app.controller('MainController', ['$scope', '$location', '$anchorScroll', function ($scope, $location, $anchorScroll) { $scope.items = [ { id: 'courses', name: 'Courses', description: 'Discover a wide range of online courses offered by w3wiki, covering various programming topics and technologies.' }, { id: 'articles', name: 'Articles', description: 'Access a vast collection of articles on programming, algorithms, data structures, and more at w3wiki.' }, { id: 'practice', name: 'Practice', description: 'Improve your coding skills by practicing coding challenges, quizzes, and exercises available on the w3wiki platform.' } ]; $scope.activeItemId = ''; $scope.scrollToItem = function (itemId) { $scope.activeItemId = itemId; $location.hash(itemId); var scrollElement = document.getElementById(itemId); scrollElement.scrollIntoView({ behavior: 'smooth' }); }; }]); |
Output:
How to Handle Anchor Hash Linking in AngularJS ?
AngularJS Anchor Hash Linking consists of developing a proper and efficient navigation experience in the one-page application. This feature of AngularJS enables users and developers to properly and smoothly scroll to specific sections of a webpage just by clicking on the navigation links, rather than performing page reload every time. In this article, we will see different approaches that will allow us to handle anchor hash linking in AngularJS. So by using this approach, we can build our own one-page application with a smooth scrolling effect.
Contact Us