jQuery动画滚动

我不知道如何调用效果，但有人可以将我指向图书馆，这将帮助我做与本网站相同的效果吗？jQuery动画滚动

http://www.makr.com

基本上，它的行向上移动到页面上点击鼠标顶部。如果没有这样的专用效果库，代码片段（最好是jQuery）可以提供帮助。

我不确定是否需要启动另一个主题，但任何人都可以帮助我用一个小的jQuery代码片段来实现Makr UI的整体效果？

来源

2011-11-08 Marvzz

林不知道如果我要开始另一个话题，但任何人都可以帮我一个小jQuery的片段，以实现Makr UI的整体效果？ – Marvzz

我给你一些很好的开始。当你点击一个项目时，获取该项目的偏移量，通过jQuery动画滚动到偏移量。 – Mathieu

是的，我得到了它们，我可以将它们滚动起来，但是我在slideDown的动画的下一部分遇到问题。我无法完全按照Makr的方式进行计时。 – Marvzz

192

您可以使用jQuery为页面的scrolltop设置动画效果。

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

浏览此网站： http://papermashup.com/jquery-page-scrolling/

来源

2011-11-08 08:09:51 Mathieu

我只需要使用'＃（“body”）。animate（...）;'它适用于firefox ，铬和ie。是否还有一个特殊情况，将动画附加到'html' DOM对象？ – Daniel

'$（“。middle”）。offset（）。top'-part是为了得到该对象（class，id，...）的偏移量，所以页面知道要滚动到的高度。如果你想滚动到位于页面中间的特定div，这可能是有用的。 – Mathieu

+14

'$（'html，body'）'用于ie8兼容性。 –

有一个jQuery插件这一点。它将文档滚动到特定的元素，以便它完全位于视口中间。它还支持动画缓冲，使滚动效果看起来非常平滑。退房AnimatedScroll.js。

来源

2013-08-12 21:32:03

我会避免使用像这样的插件，当真正的答案是本机支持。 '$（'html，body'）。animate（{scrollTop：x}，t）;'是很正确的，不需要为页面的网络标签添加一个不必要的插件。 – ChaseMoskal

你完全正确，除了这个插件能够滚动到任何文档元素，以便它完全位于窗口视口中间。 –

问题是，没有任何插件，这仍然很容易。它只是滚动到'（$ e.offset（）。top +（$ e.height（）/ 2）） - （$（window）.height（）/ 2）'，或用英文，''elementCenter减去halfViewportHeight“'。对？ – ChaseMoskal

你也可以试试我开发的一个简单的jquery插件（AnimateScroll），这个插件很受我的好评！

来源

2013-09-06 05:06:38

真棒插件 - 不能等待使用它！ –

我只是用：

$('body').animate({ 'scrollTop': '-=-'+<yourValueScroll>+'px' }, 2000);

来源

2015-08-19 17:00:05

你能解释一下你想用' - = - '做什么吗？你在试图对数字进行类型转换吗？ – user151496

@ user151496在当前启动的段落下查看jQuery的文档http://api.jquery.com/animate/“动画属性也可以是相对的。”就像在JS中，你可以说'myVar + = 10'将10添加到现有的值，这个片段基本上是使用jQuery的自定义分析来实现类似的目标：'scrollTop - = -yourScrollValue'。我不能肯定地说，为什么这里的OP选择了一个简单的'{scrollTop：'+ ='+ value}'。 – natevw

@ user151496第一个' - '是减小值，第二个' - '如果符合值为负，它们变为正值和反值。 :) –

jQuery动画滚动

回答

相关问题