Scroll to specific location within a child element using AngularJS $anchorScroll and yOffset

It seems that using $anchorScroll yOffset within a nested element is not possible according to my understanding: "To make yOffset function properly, the scrolling must occur on the document's root rather than a child element." https://docs.angularjs.org/api/ng/service/$anchorScroll

Here is an example (adapted from AngularJS documentation): I wish to click a link and have the word "between" displayed above the target of the scroll.

index.html

<body ng-app="anchorScrollOffsetExample">
    <div class="fixed-header" ng-controller="headerCtrl">
    <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
      Go to inner-anchor {{x}}
    </a>
  </div>
  <div id="anchor" class="anchor">
    <div ng-repeat="x in [1,2,3,4,5]">
        between
        <div id="innerAnchor{{x}}" class="anchor" >Inner-Anchor {{x}} of 5</div>
    </div>
  </div>
</body>

style.css

  .anchor {
    border: 2px dashed DarkOrchid;
    padding: 10px 10px 200px 10px;
    max-height:500px;
    overflow-y: auto;
  }

script.js

angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
  $anchorScroll.yOffset = 500;
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
  function ($anchorScroll, $location, $scope) {
    $scope.gotoAnchor = function(x) {
      var newHash = 'anchor' + x;
      if ($location.hash() !== newHash) {
        $location.hash('innerAnchor' + x);
      } else {
        $anchorScroll();
      }
    };
  }
]);

http://plnkr.co/edit/yFj9fL3sOhDqjhMawI72?p=preview

Is there a proper way to achieve this in AngularJS without jQuery or additional libraries, keeping the "between" outside the target DIV?

Answer №1

What is the reason for not utilizing an anchor tag?

<body ng-app="anchorScrollOffsetExample">
    <div class="fixed-header" ng-controller="headerCtrl">
    <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
      Proceed to inner-anchor {{x}}
    </a>
  </div>
  <div id="anchor" class="anchor">
    <div ng-repeat="x in [1,2,3,4,5]">
        <!-- Place an anchor above the text, and we will scroll here instead of the div -->
        <a name="innerAnchor{{x}}"></a>
        amidst
        <div class="anchor" >Inner-Anchor {{x}} of 5</div>
    </div>
  </div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to access $_SESSION variable when making AJAX request from a different port

After creating a website with PHP on port 80 (index.php) and setting the session variable with the userid upon login, I encountered an issue when clicking on a link that redirected me to port 8080, which is where a JavaScript file containing node.js proces ...

Unable to open modal using a button in PHP

<?php $result = mysqli_query($con, $sql); while ($row = mysqli_fetch_array($result)) { echo '<tr><td>'; echo '<h5 style="margin-left:6px; color:black;">' . $row['id'] . '</h5> ...

express middleware is not compatible with prototype functions

I've encountered a perplexing issue while working with the node.js express framework. Let's say I have a file called test.js containing the following code: function a(){ } a.prototype.b = function(){ this.c("asdsad"); } a.prototype.c = f ...

What is the best location to store the JWT bearer token?

Exploring options for storing JWT tokens in a Bearer header token for my application. Looking for the most efficient storage mechanism. Would love some insight on how to accomplish this using jQuery. Any recommendations for a secure method? ...

ExpressJs is throwing an error stating that the function is not defined

Feeling like I'm losing my sanity over this: Running an express app and here's a glimpse of some files for reference: app.js -models --Event.js --Match.js routes --matches.js In app.js: global.__base = __dirname + '/'; va ...

Issue with mouse movement in Selenium and Protractor not functioning as expected

Greetings! I am currently facing an issue in my Angular application with Openlayers3 map integration. There is a layer representing a building on the map, and when I try to click on a building during testing, it should trigger a side panel displaying image ...

Method for detecting changes in an AngularUI select2 dropdown

Is there a way to achieve something like the following: <select ui-select2 multiple="true" on-change="onChange()" data-ng-model="select2Model"></select> In my controller, I have the onChange(select2OnChangeData) function implemented. I at ...

Tips for displaying a specific PDF file using the selected programming language

As a newcomer to react.js, I have a question regarding my system which allows the user to select the default language. If the chosen language is French, there is a specific URL that needs to be included in the Iframe path. For Spanish, it's a specific ...

Issue with Angular Bootstrap modal reflecting changes in the tableHow about

When calling the $scope.test() function from an ng-click event, the Angular Bootstrap modal updates the table correctly. However, when calling $scope.closeAdjustmentModal (a function for closing the modal), the table is not being updated. $scope.modalIn ...

Transfer your documents effortlessly as soon as they are

I am having trouble implementing an automatic file upload feature without the need for a separate upload button. Below is the code I have so far, excluding the irrelevant CSS. //html <!-- some codes here--> <input type="file" id="f ...

Using CasperJS, learn how to effectively utilize the jQuery find() function

I'm looking to implement something similar to Cabybara within a function in CasperJS. My goal is to select parent divs and extract text from their child elements. Here's an example of what I want: $('div.education').find('h4&apos ...

Retrieve the element from the most recent append() function invocation

Is it possible to change the chain context to a new DOM node when using append() to insert it? Here is an example code snippet demonstrating this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

How can I incorporate a child component into a separate component within Angular version 14?

Currently working with Angular 14 and facing a challenge with including a child component from another module into a standalone component. The structure of the standalone component is as follows: <div> <child-component></child-component& ...

What is the most efficient way to calculate the current percentage of time that has elapsed today

Is there a way to calculate the current time elapsed percentage of today's time using either JavaScript or PHP? Any tips on how to achieve this? ...

Step-by-step guide on how to effectively send a NodeJS request and stream it into a separate response

Currently, I am in the process of developing an API to interact with a specific map service that requires the use of an API key. It is crucial for me to keep this API key private. To achieve this, I plan to make internal calls within my server's own A ...

Unable to retrieve the second number enclosed in parentheses using regular expressions

Currently, I am diving into the world of regex and encountering a set of strings formatted as "(9/13)". My goal is to retrieve the second number in this format. To achieve this, I experimented with the following regex pattern: /\(.*?[^\d]*(\ ...

Immersive multimedia experience with HTML5 video interactivity

I am currently facing a challenge with inserting interactive buttons on a video in a responsive manner. Despite my efforts, I have not been successful yet. Screen 1 Screen 2 The screenshots provided depict the video at the end. The goal is to overlay t ...

Is there a way to selectively update specific keys within existing objects in Mongodb without affecting the rest of the

Here is the scenario I am dealing with: Within my Angular 8 application, I am responsible for creating and managing invoices. The structure of an invoice object looks like this: { "_id": { "$oid": "5ea9ad58f65d8d49841362bd" }, "details": [ { ...

Enclose all elements within a pair of parent tags

Currently, I am dealing with multiple rows that have a fixed structure and attributes. However, I have the flexibility to insert child elements (.start & .end) within these rows. My goal is to enclose all elements following a row with a .start child eleme ...

Surprising automatic scrolling upon pressing the keydown button in Bootstrap

My webpage appears normal with the Bootstrap framework, but whenever I press the down key, the screen scrolls down and displays unexpected white space due to reaching the end of the background-image sized at 1798px * 1080px. Please refer to the image: htt ...