Css或javascript滚动转换？

Question

我有两个div:

width:100%; height:100%

所以我的整个文件高度为200%; div都有相互联系,

现在,当我点击链接时,我希望网站顺利滑动到另一个div,

我知道这在jquery中是如何工作的,例如使用.scrollto,但是我的客户想要一个没有框架的应用程序.只有javascricpt和css!

我试着用translateY来实现它,但它没有用!

这是一个示例代码:http: //jsfiddle.net/hSU7R/

HTML

<div class="full" id="one">
   <span style="width:100%; background-color:blue">
   <a href="#two" >Scroll to 2</a>
   </span>    
</div>


<div class="full" id="two">
    <span style="width:100%; background-color:blue">
    <a href="#one" >Scroll to 1</a></span>
</div>

CSS

html,body { 
    width:100%;
    height:100%;}

.full {
    height:100%;
    width:100%;}

#one {background-color:green}
#two {background-color:red}

Answer 1

这是您要找的吗？你的 jsFiddle 的一个分支。

必须有一种更聪明的方法来做到这一点，但这就是我们拥有 jQuery 的原因，对吗？我的基本想法是抓住每个锚点并关闭默认的点击响应。然后，将其替换为启动setInterval链条的版本。每次间隔结束时，窗口都会根据帧速率和估计的总运行时间增量滚动。实际运行时间似乎比输入时间要长，但它至少为您提供了一种入门方法。

使用 jQuery 的主要缺点是什么？我认为你会从他们的实现中获得更好的性能，因为 jQuery 人们一直在研究这些东西。