CSS/Javascript 自动滚动到顶部答案

【问题标题】：CSS/Javascript Auto Scroll To TopCSS/Javascript 自动滚动到顶部
【发布时间】：2015-05-03 03:02:44
【问题描述】：

我目前正在为我正在开发的网站的桌面版和移动版制作一个简单的（或者我认为是这样的）下拉菜单。只有在可能的情况下，我才尝试在 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 滚动回顶部，这样它仍然会显示菜单图标 + 徽标而不是随机菜单文本。

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

【问题讨论】：

标签： javascript css scroll

【解决方案1】：

您的想法可能有些笨拙，可能需要重新设计，我当然从未注意到这样的菜单。

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

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

其中 600 是需要多长时间（以毫秒为单位）。您必须将其包装在 click() 函数或其他东西中，以便在有人按下菜单选项时触发。例如：

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

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

【讨论】：

谢谢，我会调查的。是的，溢出：auto 有点尴尬。但是，如果菜单中的内容太多，我不确定如何避免它。我想如果我真的想避免它，我只需要重新设计菜单，为小屏幕提供一个完全不同的菜单，但我只是希望避免这种情况。

【解决方案2】：

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

您只需要向某个 div（可能是标题）添加一个 id，然后在链接上将 #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

【讨论】：