UI-Router causing issues with AngularJS anchorScroll functionality

Currently, I am utilizing ui-router and attempting to implement automatic scrolling within the controller. However, it seems that anchorScroll function is not working as expected. My assumption is that it may be due to having two '#' symbols in the URL.

For example:

index.php#/initiative/1/commentscroll/4

gets transformed into:

index.php#/initiative/1/commentscroll/4#comment-id-4

Nevertheless, despite the existence of anchors, the scrolling does not occur (and yes, the anchors are indeed present).

Does anyone have any suggestions or ideas on how to resolve this issue?

controllersModule.controller('InitiativeController', ['$http','$timeout','$location','$state','services','$stateParams','$anchorScroll', function($http,$timeout,$location,$state,services,$stateParams,$anchorScroll){
var pk = this;
pk.initiative={};

if($state.current.url.indexOf("/commentscroll/")!=1){
    $timeout(function() {
        $location.hash('comment-id-'+$stateParams.commentId);
        $anchorScroll();
    });
}


services.get($stateParams.initiativeId,'initiative','').then(function(data){
    pk.initiative=data;

});

function fillScrollId(element,index,array){
    if(element.initiative_comment_id===$stateParams.commentId){
        element.scrollToMe="yes";
    }
    if(element.comments.length>0){
        element.comments.forEach(fillScrollId);
    }
}
}]);

Answer №1

After troubleshooting, I discovered that the issue was related to timing.

$location.hash('comment-id-'+$stateParams.commentId);
$timeout(function(){$anchorScroll()}, 800);

Using $timeout solved the problem!

Answer №2

Another approach using animation and excluding $anchorScroll

$timeout(function () {
    if ($location.hash()) {
        var elem = 'a[name="' + $location.hash() + '"]';
        if ($(elem)) {
            $('html,body').animate({ scrollTop: ($(elem).offset().top) + 0 }, 'slow');
        }
    }
});

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

What is the best way to activate a click event when I set a radio button to checked?

I am facing an issue with an uninitialized property in my app.component.ts: color!:string; I am trying to automatically initialize the color property when a radio button is selected: <div> <input type="radio" name="colors" ( ...

Encountering a 500 server error while attempting to retrieve content from Google Images through the Web Speech API

My current project involves utilizing the Web Speech API to dynamically gather free images from Google. Here's how it works: I extract the search keyword using the Web Speech API in JavaScript. The keyword is then sent to the server (PHP) via an a ...

Java REST service remains out of reach for JavaScript fetch call

Currently, I am in the process of learning about REST API. My goal is to make a call to a POST service implemented in Java from Javascript using fetch. However, I have encountered an issue where the request fails to reach the service whenever the @Produces ...

I am unable to showcase the image at this time

Hey there, I'm having an issue with displaying an image stored inside the NextJS API folder. The alt attribute is showing up fine, but the actual image isn't displaying. When I console.log the image data, everything seems to be in place. Can anyo ...

Steps for populating an ng-table with data retrieved from a REST web service that returns a JSON format

I am currently facing an issue while trying to load my table from a JSON response that I receive from REST web services in SpringMVC. The error message I received indicates that my REST method does not support the GET request. The URL mapped in my control ...

Put Jest to the test by testing the appendFileSync function

I am currently working on creating a test for appendfilesync function. When using a logger, I noticed that one line of code is not covered in my tests. Below is the code snippet I am referring to (please note that I am using tslog for logging purposes): ex ...

What purpose does the symbol '$' serve in React component properties?

While delving into the world of styled-component, I encountered some difficulties with the 'adapting based on props' aspect. import './App.css'; import styled from 'styled-components' const PrimaryButton = styled.button` co ...

Can anyone provide a solution for determining the number of active intervals in Javascript?

Similar Question: How to View All Timeouts and Intervals in JavaScript? I've been working on an HTML5 game that includes a lot of graphical effects using intervals created by the setInterval function. However, I've noticed that my game is ru ...

Guide on utilizing Vue to trigger an API call when the input box loses focus

I am currently facing challenges while trying to learn vue, and I am not sure how to proceed. I would greatly appreciate any assistance! To begin with, I want to acknowledge that my English may not be perfect, but I will do my best to explain my issue tho ...

Access a designated tab using cbpFWTabs

I am currently using the cbpFWTabs plugin from Tympanus for my tabs (http://tympanus.net/Development/TabStylesInspiration/). However, I am struggling to open a specific tab upon page load. I have attempted to create a show method within the page script, bu ...

When using navigator.mediaDevices.getUserMedia on an iPhone, the webcam is activated in fullscreen mode

I'm facing an issue with the webcam functionality on my app. It works perfectly on Android and Windows, but when I try to use it on iPhone, the webcam opens in a separate full-screen view. Any ideas on how to resolve this? Thank you for your help in a ...

Applying CSS classes to a custom AngularJS directive: A step-by-step guide

Need to have a CSS class called tab for the nav HTML element, which will be used as a directive: <nav tab></nav> The expected interpretation is: <nav class="tab"> <a></a> <a></a> <a></a> ...

Is there a way to display the contents of a zipped file using an HTML IFrame?

Can I display the contents of a zipped file in an HTML iframe? For example: My_File.pdf.zip contains My_File.pdf. I currently have something like this <iframe src="/path of the folder/My_File.pdf.zip" /> The src attribute points to the zipped file ...

Getting JSON or JSONP data through a XAMPP local server is a straightforward process

After setting up a local server with XAMPP, my goal is to retrieve JSON / JSONP data from that server. Additional query: Do I need to upload the JSON file directly onto the server? Or can I achieve this using somePHPcoding? If so, which? I have come ac ...

JavaScript SQL results in either a string or an object after executing a

I am facing an issue with the following query: sql = client.query("SELECT * FROM monitormaterialsept", function (err, result, fields) { if (err) throw err; console.log(result); }) I am unsure of what the output of the sql variable is. Is there a ...

The .value property on the form group displays numeric values as either null or an empty string

I'm encountering an issue with extracting data from a form group. Within my code, there is a formGroup named lineitemForm, and I am attempting to structure this form group as follows: private formatTransferData() { const depositDates = this.get ...

Steps to retrieve data (token) from developer tools and incorporate it into a fetch Post request

Is there a simple way to extract data using dev tools and insert it into a fetch request? I am trying to make a POST request through the console, but I am struggling to correctly copy a token. I attempted to use querySelector but instead of finding the t ...

Formatting Dates in Node.js

Can someone assist me in understanding how to properly format the print date shown below? Thu Sep 06 2018 18:18:26 GMT+0530 I attempted to use console.log(new Date()) However, the output generated was 2018-09-06T12:48:25.776Z I am unsure of how to co ...

Transform a protractor screenshot into a PDF file

I'm currently working on a small Protractor code that captures screenshots, but my goal is to save these screenshots as PDF files. Below you can find the code snippet I have written. await browser.get(url); const img = await browser.takeScreenshot(); ...

Issue with setting ng-click scope in Angular JS when using ng-if

Recently, I encountered an issue with AngularJS: Attempting to set a scope value directly in an ng-click event does not work when the ng-click is within an ng-if statement that evaluates the same scope value. You can see an example here: http://jsfiddle.n ...