带慢速动画的链接（仅限 CSS）

Posted 2023-03-05

【中文标题】带慢速动画的链接（仅限 CSS）

【英文标题】：Back to Top Link with a slow animation (CSS only)

【发布时间】：2013-10-26 03:26:14

【问题描述】：

我有一个简单的

<a href="#header">Back to Top</a>

这让我立即进入页面顶部。但我希望它只用 CSS 就可以慢慢到达页面顶部。

这可能吗？ 提前致谢。

编辑： 好的，对于任何有同样问题的人。它用这个 JQuery 做到了：

// #btt is ID of the Back to Top Link
    $("#btt").click(function () 
    //html and body is used because of Browser compatibilit
    $("html, body").animate(scrollTop: 0, 1000);
    );

【问题讨论】：

如果你会使用javascript，有一个非常简单的库叫做ScrollTo flesler.blogspot.com/2007/10/jqueryscrollto.html

我对 JQuery 不是很有信心，但这看起来很简单。谢谢

【参考方案1】：

抱歉，您无法使用纯 CSS 激活滚动等操作。你需要一些 jQuery。

你可以做的是欺骗用户认为页面已经滚动，通过在 :hover 上使用 CSS 移动元素，但这是一个非常糟糕的做法，并且需要比简单的 jQuery 函数更多的编码。