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.
If the anchor you are linking to is on a different page as the link: In the pop-up box, click the Link to dropdown menu and select URL. Enter the full URL of the page followed by the # hashtag symbol, followed by the name of the anchor. Click Insert.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With