HTML jump to a specific part of a page works from the second click

Question

I have the following HTML code in my landing page

<div class="col-12 text-center mt-4 mb-4">
   <a class="btn know-more-btn text" href="#billing">Tell Me More</a>
</div>

<div id="billing" class="billing-section">
   //show some billing options
</div>

when clicking on btn know-more-btn for the first time the screen flickers and nothing happens only from the second click it "jumps" to the right location on the page (the billing section) Not sure why this happens

Also is there a way to turn the "jump" into simulation of fast scroll to that section

Janitha Rasanga · Answer 1 · 2020-12-21T01:16:48.907

1

Try this

html

<div class="col-12 text-center mt-4 mb-4" (click)="toSec()">
   <a class="btn know-more-btn text">Tell Me More</a>
</div>

ts

toSec() {
  document.getElementById("billing").scrollIntoView();
}

for smooth scrolling adding this to main style file

css

html {
  scroll-behavior: smooth;
}

edited Dec 21 '20 at 01:16

answered Dec 21 '20 at 01:08

Janitha Rasanga

1,010
1
11
20

Hi you answer is working but it I think it is better if you use view queries like ViewChild rather than `document.getElementById` – Muhammed Albarmavi Dec 21 '20 at 03:45

Muhammed Albarmavi · Answer 2 · 2020-12-21T06:13:13.570

this will not work will with the router <a href="#billing">Tell Me More</a> ,it will trigger the router to redirect to some page or reload the page.

so one way to solve it by useing template variable and call scrollIntoView method to apply scrolling.

<div class="basic c-pointer col-12 text-center mt-4 mb-4">
   <a class="btn know-more-btn text" 
    (click)="billingElm.scrollIntoView({behavior: 'smooth'})" >
      Tell Me More 
    </a>
</div>

<div #billingElm class="billing-section">
   //show some billing options
</div>

stackblitz demo

for reusability this the directive way

@Directive({
  selector: '[scrollTo]'
})
export class ScrollToDirective {

  @Input('scrollTo') elm:HTMLElement;

  @HostListener('click') onClick(){
    if(this.elm){
      this.elm.scrollIntoView({behavior:'smooth'});
    }
  }
}

template

<div class="col-12 text-center mt-4 mb-4">
   <a class="btn know-more-btn text" [scrollTo]="billingElm" >Tell Me More </a>
</div>

<div #billingElm class="billing-section">
   //show some billing options
</div>

stackblitz demo

check this Passive Link in Angular 2 - equivalent to get more details about how this problem.

HTML jump to a specific part of a page works from the second click

2 Answers2