• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Tim Cooke
  • Jeanne Boyarsky
  • Bear Bibeault
Sheriffs:
  • Knute Snortum
  • paul wheaton
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Ron McLeod
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Tim Holloway
  • Carey Brown
  • salvin francis

Angular Routing - Clear Location/Fragment

 
Ranch Hand
Posts: 192
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have a route to a my Dogs page and then I have anchors for each dog within. I can click on the anchor when the page loads and it will go to the correct ID but once there my browser thinks I am still there even when I scroll to the top of the page.

Is there a way to clear the anchor location so that I can scroll to the top and then back to the same ID again? (Note: If I click on a different anchor I can go back to the first one I clicked on)

HTML:


TS:
 
Rancher
Posts: 478
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Doesn't the anchor appear in the url with a # in front?   The anchor mechanism is handled by html so to clear it you would have to change the url  or navigate back to the dogs page without the anchor.  
Why don't you put the dog images in another component  so when you click on the dog or whatever instead of going to the content using an anchor it just goes to another route like dogs/<<dogname>>  
 
Al Hobbs
Rancher
Posts: 478
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Doesn't the anchor appear in the url with a # in front?   The anchor mechanism is handled by html so to clear it you would have to change the url  or navigate back to the dogs page without the anchor.  
Why don't you put the dog images in another component  so when you click on the dog or whatever instead of going to the content using an anchor it goes to another route like dogs/<<dogname>>  
 
John Morgan
Ranch Hand
Posts: 192
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Al Hobbs wrote:Doesn't the anchor appear in the url with a # in front?   The anchor mechanism is handled by html so to clear it you would have to change the url  or navigate back to the dogs page without the anchor.  
Why don't you put the dog images in another component  so when you click on the dog or whatever instead of going to the content using an anchor it goes to another route like dogs/<<dogname>>  


Yes it is a URL with a # in front if the ID location and clearing the URL without reloading the page is what I am trying to accomplish. This is a training exercise for some projects we are working on at work so the option of creating another component would defeat the purpose (I have done that elsewhere in my application). I am not even sure if this is feasible at this point but I figured I would ask to see if anyone has come across this from some other aspect of working with Angular.
 
Al Hobbs
Rancher
Posts: 478
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I think if you just remove the # from the url then angular won't reload because it's the same route.
 
John Morgan
Ranch Hand
Posts: 192
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Correct. Which is why I was looking for a way to clear it from memory.
 
Al Hobbs
Rancher
Posts: 478
6
IntelliJ IDE Spring Fedora
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
So you want to be able to go to different anchors?
 
John Morgan
Ranch Hand
Posts: 192
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I can easily navigate to different anchors, and when I choose anchor #2 I can navigate back to anchor#1... however if I scroll to the top of the page from Anchor #1 I cannot click on the link to bring me back to the anchor#1 point.  That is what I am trying to accomplish.  Not sure if I am explaining that well or not.
 
John Morgan
Ranch Hand
Posts: 192
2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I found something close to what I want to do but it does not seem to work in angular...


It should just make the location for the router link reset to the base without moving me on the page at all.
 
Popeye has his spinach. I have this tiny ad:
create, convert, edit or print DOC and DOCX in Java
https://products.aspose.com/words/java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!