使用Javascript实现窗口滚动的动画效果

Question

所以我正在这样使用window.scrollby

<script> 
function scrollWindowup()   {  
 window.scrollBy(0,700)   
 }  
 function scrollWindowdown()   { 
 window.scrollBy(0,-700)   }
 </script>

有没有任何方法可以像缓慢移动或偏移或其他选项一样对其进行动画处理？提前感谢。

- user1749105

Answer 1

从一个类似的问题中...

你可以使用 jQuery 来动画滚动页面的 scrolltop。

$('html, body').animate({
    scrollTop: $(".middle").offset().top
 }, 2000);

或者

$('html, body').animate({
    scrollTop: 700
 }, 2000);

向下滚动页面的动画效果：

$('html, body').animate({
    scrollTop: '+=700'
 }, 2000);

动画向上滑动页面:

$('html, body').animate({
    scrollTop: '-=700'
 }, 2000);

请参考这个网站： http://papermashup.com/jquery-page-scrolling/

- Bill

---

那段代码是用于在页面中移动到不同的部分，我只想让它向上或向下移动固定数量的像素，并带有一些效果或动画。 - user1749105

您可以将 scrollTop 设置为任何想要的值，它可以是固定像素数。 - Bill

我有一个大约3000像素高的页面，希望以向上和向下每次滚动700像素的方式滚动.. ScrollTop可以工作，但只能到达前700像素而不是逐步滚动.. 还有没有办法向下滚动？请原谅我的初学者问题.. 非常感谢。 - user1749105

更新了我的回答。您可以使用+=和-=与animate一起向上或向下滚动页面。 - Bill