HTML部分的平滑动画

Smooth animation of HTML sections

本文关键字：平滑 动画 HTML      更新时间：2023-09-26

我知道可以将转换到html部分设置为动画，使其平滑。

此网站：http://en.wikipedia.org/wiki/Dobroslav_Jevdevic

  • 使用HTML部分
  • 当你点击内容列表中的链接时，你会直接进入那里

此网站：http://whatbrowser.org

  • 使用HTML部分
  • 当你点击一个链接(页面底部的"返回顶部"(时，你会顺利过渡

我在很多其他网站上也看到过，你到底是怎么做到的？

起初，我认为你需要jQuery，但作为一个HTML类型的人，我并不是真正的java。。。我该怎么做呢？提前感谢您的帮助：D

$('body').animate({scrollTop: 222});

在参考站点中(http://en.wikipedia.org/wiki/Dobroslav_Jevdevic)这是用id的hwlp完成的。例如<a href="#abc">Click Here</a>在锚标记href中，我们传递元素的id，点击锚标记时页面应该滚动到该元素。但是为了提供平滑的效果，您必须使用jquery方法。还有一个可以使用的javascript方法scrollTo((方法。如果您想只使用html代码而不使用jquery，那么请参阅以下代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<a href="#abc">Click Here</a>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
   <h2 id="abc">Main Section</h2>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
   <p>Hello</p>
</body>
</html>
相关文章：