jQuery 动画滚动答案

【问题标题】：jQuery animate scrolljQuery 动画滚动
【发布时间】：2011-12-24 06:00:23
【问题描述】：

我不知道如何调用该效果，但有人可以将我指向一个可以帮助我实现与本网站相同效果的库吗？

http://www.makr.com

基本上，它会在鼠标单击时将行向上移动到页面顶部。如果没有专门的效果库，一个代码 sn-p，最好是 jQuery，可以提供帮助。

我不确定我是否需要开始另一个话题，但是谁能帮我用一个小的 jQuery sn-p 来实现 Makr UI 的整体效果？

【问题讨论】：

我不确定我是否需要开始另一个话题，但是谁能帮我用一个小的 jQuery sn-p 来实现 Makr UI 的整体效果？
我给了你一些好的开始。当您单击一个项目时，获取该项目的偏移量，然后使用 jQuery animate 滚动到该偏移量。
是的，我得到了它们，我可以向上滚动它们，但是我在下一部分的 slideDown 动画中遇到了问题。我无法像 Makr 那样对它们进行计时。
您总是可以使用延迟函数：.delay(1000) 将函数延迟 1 秒。 api.jquery.com/delay或者在完整函数中设置slideDown

标签： jquery user-interface scroll effects

【解决方案1】：

您可以使用 jQuery 为页面的滚动顶部设置动画。

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

查看此网站： http://papermashup.com/jquery-page-scrolling/

【讨论】：

我只需要使用#("body").animate(...);，它适用于firefox、chrome和ie。是否有将动画附加到html DOM 对象的特定情况？
'$(".middle").offset().top'-部分是获取那个对象的偏移量（class,id,...），所以页面知道什么高度滚动到。如果您想滚动到位于页面中间的某个 div，这会很有用。
$('html, body') 是为了兼容 ie8。
$('html, body') 也适用于 safari
jQuery究竟是如何实现平滑滚动的？

【解决方案2】：

您可以试一试这个简单的 jQuery 插件 (AnimateScroll)。它很容易使用。

1.滚动到页面顶部：

$('body').animatescroll();

2。滚动到 ID 为 section-1 的元素：

$('#section-1').animatescroll({easing:'easeInOutBack'});

免责声明：我是这个插件的作者。

【讨论】：

【解决方案3】：

我只是使用：

$('body').animate({ 'scrollTop': '-=-'+&lt;yourValueScroll&gt;+'px' }, 2000);

【讨论】：

你能解释一下你想用'-=-'做什么吗？你是想输入数字还是什么？
@user151496 查看 jQuery 的文档 api.jquery.com/animate 在当前开始的“动画属性也可以是相对的”段落下。就像在 JS 中你可以说 myVar += 10 将 10 添加到现有值一样，这个 sn-p 基本上是使用 jQuery 的自定义解析来实现类似的目标：scrollTop -= -yourScrollValue。我不能确定为什么这里的 OP 选择了更简单的 {scrollTop: '+= '+value}。
@user151496 第一个“-”是减小值，第二个“-”如果遇到负值，它们变为正值和相反值。 :)
我了解 -= 和 - 的作用。我只是不知道他为什么不使用 += 代替：S
@user151496 如果使用 += 可能以防万一滚动向下而不是向上滚动。 :)

【解决方案4】：

var page_url = windws.location.href;
var page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
} else if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-" + page_id).offset().top
    }, 2000)
}

});

【讨论】：

不鼓励仅使用代码回答。请添加一个简单的解释。

【解决方案5】：

为此有一个 jquery 插件。它将文档滚动到特定元素，以便它完美地位于视口的中间。它还支持动画缓动，使滚动效果看起来超级流畅。查看AnimatedScroll.js。

【讨论】：

当真正的答案得到原生支持时，我会避免使用这样的插件。 $('html,body').animate({scrollTop:x},t); 非常正确，无需在页面的网络选项卡中添加不必要的插件。
你说的很对，除了这个插件可以滚动到任何文档元素，所以它正好在窗口视口的中间。
问题是，没有任何插件仍然很容易。只需滚动到($e.offset().top+($e.height()/2))-($(window).height()/2) 或英文"elementCenter minus halfViewportHeight"。对吗？
对，只要您不介意每次需要滚动到特定元素时都编写这么多代码
@EugeneTiurin 你可以创建一个自定义函数，将元素作为参数。