JavaScript - Simple Anchor Scroll Using AngularJS

Submitted by razormist on Friday, January 4, 2019 - 21:35.

Language

In this tutorial we will create a Simple Anchor Scroll Using AngularJS. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. It is mostly used by other well known site for creating a template.

Getting started:

First you will need to download & install the AngularJS here's the link https://angularjs.org/.

Creating the Main Interface

This code contains the interface of the application. This code will render application and display the form. To do that just kindly write these block of code inside the text editor and save this as index.html.

<!DOCTYPE html>
<html lang="en" ng-app="apps">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
                <script src="js/angular.js"></script>
                <script src="js/script.js"></script>
        </head>
<body ng-controller="controller">
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">JavaScript - Simple Anchor Scroll Using AngularJs</h3>
                <hr style="border-top:1px dotted;"/>
                <center><button class="btn btn-success" id="top" ng-click="scrollTo('bottom')"><span class="glyphicon glyphicon-arrow-down"></span> Go to Bottom</button></center>
                <br /><br />
                <div>
                        <h1>What Is AngularJS?</h1>
                        <p>AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.</p>
                        <p>AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?</p>
                        <p>The impedance mismatch between dynamic applications and static documents is often solved with:</p>
                        <ul>
                                <li><strong>a library</strong> - a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. E.g., jQuery.</li>
                                <li><strong>frameworks</strong> - a particular implementation of a web application, where your code fills in the details. The framework is in charge and it calls into your code when it needs something app specific. E.g., durandal, ember, etc.</li>
                        </ul>
                        <h1>A complete client-side solution</h1>
                        <p>AngularJS is not a single piece in the overall puzzle of building the client-side of a web application. It handles all of the DOM and AJAX glue code you once wrote by hand and puts it in a well-defined structure. This makes AngularJS opinionated about how a CRUD (Create, Read, Update, Delete) application should be built. But while it is opinionated, it also tries to make sure that its opinion is just a starting point you can easily change. AngularJS comes with the following out-of-the-box:</p>
                        <ul>
                                <li>Everything you need to build a CRUD app in a cohesive set: Data-binding, basic templating directives, form validation, routing, deep-linking, reusable components and dependency injection.</li>
                                <li>Testability story: Unit-testing, end-to-end testing, mocks and test harnesses.</li>
                                <li>Seed application with directory layout and test scripts as a starting point.</li>
                                
                        </ul>
                </div>
                <br />
                <center><button class="btn btn-success" id="bottom" ng-click="scrollTo('top')"><span class="glyphicon glyphicon-arrow-up"></span> Go To Top</button></center>
        </div>
</body>
</html>

Creating the Script

This code contains the main function of the application. This code will automatically jump to the target page container without scrolling. To that just kindly copy and write these block of codes inside the text editor, then save it as script.js

var apps = angular.module("apps", [])
                                        .controller("controller", function($scope, $location, $anchorScroll){
                                                $scope.scrollTo = function (scrollTarget){
                                                        $location.hash(scrollTarget);
                                                        $anchorScroll();
                                                }
                                        });

There you have it we successfully created a Simple Anchor Scroll Using AngularJS. I hope that this very simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

158 views