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}

我在较小的屏幕上出现 'overflow: auto' 的原因是整个菜单在较小的屏幕上没有显示 - 即使我有一些元素在移动屏幕上没有显示。

我运行遇到的问题是当它确实溢出并且用户滚动浏览菜单时，当他们 click/hover 离开菜单时它会像应该的那样缩回但它没有不再显示菜单顶部，它将显示他们滚动到的任何位置。

我想通过 CSS 或 Javascript 找到一种方法，当用户 clicks/hovers 离开时自动让 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），然后在 link 上你将 #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

CSS/Javascript 自动滚动到顶部

CSS/Javascript Auto Scroll To Top

javascript

css

scroll