Scroll to various location on an Angular page using href and $anchorScroll without reloading the page

Question

I am trying to create menu links that will allow the user to scroll to various locations on a single page without reloading the page. I have been able to get this to work using some of the questions previously asked, but I am struggling to make this work using a directive.

I would really appreciate your help with this!

Below are the referenced pages and the concept I am using to achieve the basic scrolling:

href overrides ng-click in Angular.js

angularjs $anchorScroll sometimes refresh all page

You will notice in my Plunker there is an Embedded Menu and a Directive Menu. The Embedded Menu and functionality is working, but cannot get my Directive Menu to work.

Here is my Plunker for testing and setting this up:

Test Plunker

score 0 · Accepted Answer · answered Dec 19 '16 at 09:37

If anyone else might have a similar question, I solved my issue with the following method:

1. I added this method to call from my menu in my **Controller:**

 $scope.redirectTodiv = function (divname, event) {
                var id = $location.hash();
                $location.hash(divname);
                $anchorScroll();
                $location.hash(id);
};

Remember to add $location and $anchorScroll as dependencies in your Controller!

2. This is the code if my menu:

<section class="adminMenu" ng-class="menuStateClass">
  <h3>{{fusionTitle}}</h3>
  <div id="minMaxMenu" ng-click="minMaxMenu()">
    <img src="images/collapse.svg" title="Click to expand" width="23" height="23" id="menuExpand" class="collapseIcon" ng-class="arrowDirectionClass" /> <span ng-show="showMenuHideText">Hide Menu</span>
  </div>
  <nav class="side-nav">
      <ul>
        <li id="socialMediaClick"><a href ng-click="redirectTodiv('top', $event)"><img title="Post List" src="images/postList.svg" title="" height="25" /><span class="navText">Summary</span></a></li>
        <li><a href ng-click="redirectTodiv('mentionList', $event)"><img title="Mentions List" src="images/postList.svg" title="" height="25" /><span class="navText">Mentions List</span></a></li>
        <li><a href ng-click="redirectTodiv('volume', $event)"><img title="Volume" src="images/volumeHour.svg" title="" height="25" /><span class="navText">Volume</span></a></li>
        <li><a href ng-click="redirectTodiv('mediaSource', $event)"><img title="Media Source" src="images/postSource.svg" title="" height="25" /><span class="navText">Media Source</span></a></li>
        <li><a href ng-click="redirectTodiv('sentiment', $event)"><img title="Sentiment" src="images/sentiment.svg" height="25" /><span class="navText">Sentiment</span></a></li>
        <li><a href ng-click="redirectTodiv('engagers', $event)"><img title="Engagers" src="images/engagement.svg" height="25" /><span class="navText">Engagers</span></a></li>
        <li><a href ng-click="redirectTodiv('linkShares', $event)"><img title="Link Shares" src="images/source_list.svg" height="25" /><span class="navText">Link Shares</span></a></li>
        <li><a href ng-click="redirectTodiv('hashtags', $event)"><img title="Hashtags" src="images/hashtag.svg" height="25" /><span class="navText">Hashtags</span></a></li>
        <li><a href ng-click="redirectTodiv('appsUsed', $event)"><img title="Apps Used" src="images/twitterPlatform.svg" height="25" /><span class="navText">Apps Used</span></a></li>
        <li><a href ng-click="redirectTodiv('demographics', $event)"><img title="Demographics" src="images/demographics.svg" height="25" /><span class="navText">Demographics</span></a></li>
        <li><a href ng-click="redirectTodiv('wordCloud', $event)"><img title="Word Cloud" src="images/wordCloud.svg" height="25" /><span class="navText">Word Cloud</span></a></li>
        <li><a href="#summary_social_mentions_social_media#/support"><img title="Support" src="images/help.svg" title="" height="25" /><span class="navText">Support</span></a></li>
      </ul>
  </nav>
</section>

3. I simply specified my Controller used for the functionality of my view as my Controller to use in the custom Directive:

<og-social-mentions-social-media-nav ng-controller="SocialMentionsAnalysisController"></og-social-mentions-social-media-nav>

NOTE: It is important to keep track of your $scope in both your Controller and Directive. In my case I had minimal functionality in my Directive, and I have no issues with $scope pollution or clashes.

Scroll to various location on an Angular page using href and $anchorScroll without reloading the page

1 Answers1