javascript - 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 滚动回顶部，这样它仍会显示菜单图标 + Logo 而不是随机菜单文本。

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

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，但这是解决此类问题的一种流行方法。