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