Material design lite: mdl-layout__tab-bar and page scroll

Question

I have a mdl-layout__tab-bar with a few links in the navigation bar. I want these links to trigger a page scroll to sections of the page.

I have tried the following solutions:

# the targeted section starts with the <a name="myTargetedSection" id="myTargetedSection"></a> tag
<div class="mdl-layout__tab-bar">
    <a href="#myTargetedSection" class="mdl-layout__tab is-active">My link</a>
    ...
</div>

This does not work and neither does

<div class="mdl-layout__tab-bar">
    <a href="#myTargetedSection" class="mdl-layout__tab" onclick="elmnt = document.getElementById('myTargetedSection'); scrollTo(document.body, elmnt.offsetTop, 600);">My link</a>
    ...
</div>

It seems that mdl-layout__tab links work only with mdl-layout__tab-panel elements. The (unsatisfying) solution I found was to use regular mdl-navigation__link links, but these have no bottom-border, and cannot be horizontaly browsed on small screens.

Any idea? Thank you!

Answer 1

Resolved: the following code works

<div class="mdl-layout__tab-bar">
    <a href="#myTargetedSection" class="mdl-layout__tab" onclick="elmnt = document.getElementById('myTargetedSection').scrollIntoView();">My link</a>
</div>