在单个 HTML 页面中单击 CSS 或 Javascript 时 div 标签之间的平滑过渡答案

【问题标题】：Smooth Transitions between div tags on click in CSS or Javascript in a single HTML Page在单个 HTML 页面中单击 CSS 或 Javascript 时 div 标签之间的平滑过渡
【发布时间】：2012-07-20 20:55:57
【问题描述】：

我在单个页面上实现不同 div 标签之间的平滑导航时遇到了问题。

假设我有一个包含 5 个不同标签的页面，它们中有一个锚标签，可以重定向到同一页面中的其他 div 标签。现在如果我点击一个 div 标签内的锚标签，它会重定向到同一页面中的另一个 div 标签，这个效果将非常简单，没有平滑，只是简单的 drop。

所以我需要让这个效果具有某种滑动效果。点赞this

在上面的网站中，当您点击“WHAT'S YOUR G'NOSH”标签时，您会向下滑动到相应的挖掘处。我需要这个功能并尝试过 moz-transition: ease 0.6s。以及所有这些，但尚未找到解决方案，请帮助。问候。

【问题讨论】：

@Mr.Alien ：查看示例。

标签： javascript html css

【解决方案1】：

请参阅Animated scrollto effect。希望对您有所帮助。

【讨论】：

【解决方案2】：

G'NOSH 正在使用 jQuery arctic_scroll 插件进行内部链接滚动。你可以找到它，它是指南here。

【讨论】：

【解决方案3】：

简单的人使用这个插件：http://www.kryogenix.org/code/browser/smoothscroll/

在<head>中添加上述插件

任何链接的html：

<a href="#about">About me</a>

点击链接时显示的 Div：

<div id="about">I am UI/Ux designer born with a pair of headphone</div>

【讨论】：

对的人...谢谢，这个工作，以及 arctic_scroll

【解决方案4】：

这是纯 CSS 解决方案，但仅适用于现代浏览器

http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

【讨论】：