Question

最近我切换到了Angular material我正在处理的网站，它有一个导航栏（现在是一个工具栏），按钮点击后会滚动到页面上的部分。

现在，要让工具栏shrink生效并在向上滚动时重新出现，我必须将页面内容放在工具栏后面的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 smooth scroll进行平滑滚动，但在尝试解决此问题时将其删除。

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

希望这有帮助！

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

1 个答案: