I tried something like:
<a href="#parallaxdiv">Teste</a>
<div id="parallaxdiv"></div>
Anchor link to direct to a div does not work
1
I'm using Angular 2+, I'm trying to add an anchor that when clicked will take me to the target div, but when I click on the anchor, my site is reloaded and adds the #parallaxdiv link after the localhost ... in instead of moving to the link.
asked by anonymous 17.07.2018 / 20:36
2 answers
2
I was able to resolve using:
<a (click)="scroll(target)"
<div #target>Your target</div>
17.07.2018 / 21:03
0
Note that for this to work by using the checked solution, you must have a scroll-named method that receives a parameter. In the scroll (param) case it would be an example signature.
You can use ready-made solutions like SmoothScroll , which also allows you to configure some other features such as example scrolling smoothly and setting the scroll time. It has simple and complete documentation, but anyway follow the example below:
<!-- Script CDN para ancora -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script><script>letscroll=newSmoothScroll('a[href*="#"]', {
speed: 300,
speedAsDuration: true,
<!-- History -->
updateURL: true, <!-- Update the URL on scroll -->
popstate: true <!-- Animate scrolling with the forward/backward browser buttons (requires updateURL to be true) -->
});
This is only used normally in HTML as you did in the problem description:
<a href="#parallaxdiv">Teste</a>
<div id="parallaxdiv"></div>
10.01.2019 / 19:57