jQuery动画滚动

Question

我不确定该怎么称呼这种效果，但能否有人指引我使用哪个库来帮助我实现与此网站相同的效果？

http://www.makr.com

基本上，它会在鼠标单击时将行向页面顶部移动。如果没有专门的效果库，可以使用一小段代码片段，最好是jQuery。

我不确定是否需要开启另一个主题，但有人能否帮我提供一个小的jQuery代码片段来实现Makr UI的整个效果？

- Marvzz

---

我不确定是否需要开启另一个话题，但是否有人可以帮我用一个小的jQuery代码段来实现Makr UI的整个效果？ - Marvzz

我给你一个很好的起点。当你点击一个项目时，使用jQuery动画获取该项目的偏移量并滚动到该偏移量。 - Mathieu

是的，我得到它们了。我能够将它们向上滚动，但是我在使用slideDown动画的下一个部分遇到了麻烦。我不能像Makr那样完全控制它们的时间。 - Marvzz

你可以随时使用延迟函数：.delay(1000) 来延迟函数 1 秒。http://api.jquery.com/delay/ 或者在 complete 函数中设置 slideDown。 - Mathieu

Answer 1

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

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

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

- Mathieu

---

我只需要使用 #("body").animate(...);，在 Firefox、Chrome 和 IE 中都有效。是否有特殊情况需要将动画附加到 html DOM 对象上？ - Daniel

"$(".middle").offset().top" 部分是获取该对象（类、ID等）的偏移量，以便页面知道要滚动到什么高度。如果您想要滚动到位于页面中间位置的某个 div，这将非常有用。 - Mathieu

$('html, body') 是为了兼容 ie8。 - Szymon Wygnański

$('html, body') 也适用于Safari。 - honk31

jQuery如何实现平滑滚动？ - oldboy

在2021年，$('body')在Chrome和Firefox中都不起作用，只有$('html')可以。因此，当然要选择$('html, body')。顺便说一句，这些也都不起作用：$(window)，$(window.document)，$(window.document.body)。 - Bob Stein

Answer 2

您可以尝试使用这个简单的jQuery插件（AnimateScroll）。它非常易于使用。 1. 滚动到页面顶部：

$('body').animatescroll();

2. 滚动到具有ID section-1 的元素：

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

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

- Ram Patra

Answer 3

我只是使用了：

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

- Ngô Đức Tuấn

---

你能解释一下你在使用“-=-”时想要做什么吗？你是想对数字进行强制类型转换还是其他操作？ - user151496

@user151496 第一个 '-' 是减少值，第二个 '-' 如果遇到负数则变为正数，反之亦然。 :) - Ngô Đức Tuấn

我理解 -= 和 - 的含义，但我不知道为什么他不使用 += 代替 :S - user151496

如果@user151496使用"+="，可能会出现向下滚动而不是向上滚动的情况，这可能并非他所期望的结果。 :) - Ngô Đức Tuấn

那真是一些奇怪的逻辑。 - user151496

Answer 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)
}

});

- Ragnarök

---

不鼓励只回答代码。请添加简单的解释。 - Jason

Answer 5

有一种jQuery插件可以实现这个功能。 它滚动文档到特定元素，使其完美地位于视口中间。 它还支持动画缓和，以便滚动效果看起来非常流畅。 查看 AnimatedScroll.js。

- Eugene Tiurin

---

我建议避免使用这样的插件，因为真正的答案已经得到本地支持。$('html,body').animate({scrollTop:x},t);是完全正确的，没有必要在页面的网络选项卡中添加不必要的插件。 - ChaseMoskal

你说得没错，除了这个插件能够滚动到任何文档元素，使其恰好位于窗口视口的中央。 - Eugene Tiurin

问题是，即使没有任何插件，这仍然非常容易。只需要滚动到 ($e.offset().top+($e.height()/2))-($(window).height()/2)，或者用英语说，"elementCenter minus halfViewportHeight"。对吧？ - ChaseMoskal

没错，只要你不介意每次需要滚动到特定元素时编写那么多代码。 - Eugene Tiurin

@EugeneTiurin 你可以创建一个自定义函数，以该元素作为参数。 - Jarrod Mosen

但是jQuery究竟是如何实现平滑滚动的呢？ - oldboy