How to use anchor links in elements inside md content?

Question

Recently, I switched to Angular material for the website I was working on, with a navigation bar (now a toolbar) with buttons that, when clicked, highlight sections on the page.

Now, so that the toolbar shrinks and reappears when scrolling up, I had to put the contents of the page into the component of the md-content component after the toolbar, but it broke all the binding functionality ...

I can’t find a fix for this, they only work when the scrollable element is the body, but with the fact that I lose the shrink effect, the ripple effect and even get a weird kind of 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 used Angular smooth scrolling to smoothly scroll, but I deleted it when I tried to enable this.

Answer 1

This may not always work for most elements; this is because not all elements have an HREF attribute. The way around this is to use the onClick method as shown below (the button does not have an HREF attribute):

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

However, using this cursor will remain the default cursor, so to make it more like the ARE HREF tag, you can add: onMouseOver="this.style.cursor = 'pointer';" and onMouseOut="this.style.cursor = 'default';"

Check out 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!