How to use anchor links in elements inside md-content?

Question

Recently I switched to Angular material for a website I was working on, which had a navbar (now a toolbar) with buttons that on click would scroll to sections on the page.

Now, to have the toolbar shrink effect and reappear on scroll up I had to put the page content on a md-content component right after the toolbar, but it broke all anchor links functionality...

I can't seem to find a fix for this, they only work when the scrollable element is the body but having that I lose the shrink effect, ripple effect and even get a odd looking sidenav...

Relevant code:

CSS:

body{
  overflow-y: hidden;
}
#main-content{
  height: 100vh;
}

HTML:

<md-toolbar md-scroll-shrink>
  (...)
  <md-button href="#leave-email">Click</md-button>
</md-toolbar>
<md-content id="main-content">
  (...)
  <md-button href="#leave-email">Click</md-button>
  (lot of stuff)
  <section id="leave-email">(...)</section>
</md-content>

None of the above buttons work, previously I was using Angular smooth scroll for a smooth scroll but I removed it while trying to solve this.

Answer 1

That may not necessarily work for most elements; this is because not all elements have the HREF attribute. A way around this is to use the onClick method like below (Button doesn't have the HREF attribute either):

<button onClick="location.href = 'http://google.co.uk/';"></button>

However when using this, your cursor will stay as the default cursor, so to make this more like the A tag's HREF, you can add : onMouseOver="this.style.cursor = 'pointer';" and onMouseOut="this.style.cursor = 'default';"

Check this example below :

<button onMouseOver="this.style.cursor = 'pointer';" onMouseOut="this.style.cursor = 'default';" onclick="location.href = 'http://google.co.uk/';">Click Here</button>

Hope this helps!