CSS/Javascript 自动滚动到顶部

Question

我目前正在为我正在处理的网站的桌面版和移动版开发一个简单的（或者我认为是这样的）下拉菜单。 仅在可能的情况下，我才尝试在 CSS 中执行此操作。 目前我使用的CSS如下：

#menu {position: absolute; top: 0; left: 0; width: 100%; max-height: 50px; overflow: hidden; -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */ transition: all 1s ease; padding: 4px; }
#menu:hover {max-height: 75%; overflow: auto}

我在较小的屏幕上出现“溢出：自动”的原因是整个菜单在较小的屏幕上没有显示——即使我有一些元素没有在移动屏幕上显示。

我遇到的问题是当它确实溢出并且用户滚动菜单时，当他们单击/悬停在菜单外时它会像应该的那样缩回但它不再显示菜单的顶部，它会显示无论他们滚动到哪里。

我想通过 CSS 或 Javascript 找到一种方法，当用户单击/悬停菜单时自动让该 div 滚动回顶部，因此它仍会显示菜单图标 + 徽标而不是随机菜单文本。

我喜欢它的工作方式，但无法忍受较小屏幕上的滚动问题。

Answer 1

您的想法可能有些尴尬，可能只需要重新设计，我当然从来没有注意到菜单是这样工作的。

但是滚动到顶部的jQuery代码是这样的：

$("html, body").animate({
    scrollTop: 0
}, 600);

600是多长时间（毫秒）。 您必须将其包装在click（）函数或其他内容中，以便在有人按下菜单选项时触发它。 例如：

$('#menu a').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
});

当然，所有这些代码都应该包装在$（document）.ready（）（基本jQuery设置）中，我知道您没有在问题中提及jQuery，但这是解决此类问题的一种流行方法。

Answer 2

还有另一种方法可以仅使用 html 实现点击时自动滚动。

您只需要向某个 div 添加一个 id（可能是 header），然后在链接上将 #id 传递给 href，如下所示：

html

<div id="Header">your header</div>

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

css

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

我建议尝试scroll-behavior: smooth; 它使过渡，嗯......顺利：D

在这里您可以找到有关此解决方案所需的所有文档https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior