如何在md-contents中的元素中使用锚链接？

Question

最近我切换到Angular材料用于我正在处理的网站,它有一个导航栏(现在是一个工具栏),按钮点击后会滚动到页面上的部分.

现在,为了让工具栏缩小效果并在向上滚动时重新出现,我不得不将页面内容放在工具栏后面的md-content组件上,但它打破了所有锚链接功能......

我似乎无法找到解决这个问题的方法,它们只在可滚动元素是身体时工作但却失去了收缩效果,涟漪效应,甚至得到一个奇怪的侧面...

相关代码:

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>

以上按钮都不起作用,之前我使用Angular平滑滚动进行平滑滚动但我在尝试解决此问题时将其删除.

Answer 1

这可能不一定适用于大多数元素；这是因为并非所有元素都具有 HREF 属性。解决这个问题的方法是使用如下所示的 onClick 方法（Button 也没有 HREF 属性）：

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

但是，使用此选项时，您的光标将保持默认光标，因此为了使其更像 A 标记的 HREF，您可以添加 :onMouseOver="this.style.cursor = 'pointer';"和onMouseOut="this.style.cursor = 'default';"

检查下面这个例子：

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

希望这可以帮助！