css - 媒体查询最小高度显示 anchor 顶部链接

Question

我有一个“转到顶部”链接，可将手机/平板电脑滚动到网页顶部。通常我会在 JS 中检测窗口和主体高度来执行此操作。

有没有办法在媒体查询中做到这一点？

@media only screen and (min-height: 500px) and (max-width: 768px) 
{
    .scrollTop { display: block }
}

Answer 1

您可以添加一个标识页面顶部的 anchor 。例如，在 Logo 上:

<a href="/" id="top"><img src="logo.gif" /></a>

id="top" 才是关键。然后您可以在“转到顶部”链接中链接到 #top。例如:

<a href="#top">Go to top</a>

如果您希望它只针对某些屏幕尺寸显示，当您不希望它显示时，只需在媒体查询中使用 display: none 即可。