网站搜索

javascript - 使用鼠标滚轮和滚动条实现平滑的垂直页面滚动

我正在玩弄并尝试制作一个视差网站——是的，我知道它们是一种令人恼火的时尚，但我仍然想尝试一下。所以，为了获取灵感，我一直在查看各种优秀的视差网站示例，并偶然发现了这个：https://victoriabeckham.landrover.com/INT。

它使用鼠标滚轮、滚动条和锚点链接进行平滑滚动。我一直在寻找可以实现这种效果的 jQuery 插件，但似乎只能找到使用内部页面链接（锚点或 ID，详见下文）的插件，而不能实现鼠标滚轮和滚动条的效果。我很可能是使用了错误的关键词进行搜索。有人知道找到这些插件的正确术语，或者知道可以实现这种效果的插件吗？

顺便说一下，我目前正在学习 jQuery 和 Javascript，但还处于非常初级阶段——仍在浏览 Codeacademy 的课程，还没有真正参与过实际项目代码。所以目前我正在通过插件来学习，但希望几个月后我可以自己构建一些东西！

平滑滚动到锚点或ID：

  • http://archive.plugins.jquery.com/project/ScrollTo
  • http://jsfiddle.net/9Amdx/7/
  • http://arthurclemens.github.com/jquery-page-scroll-plugin/
  • http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
  • http://www.designova.net/scrollerbird/
  • http://chris-spittles.co.uk/?p=462
  • http://joelb.me/scrollpath/（*感谢 @DrunkRocketeer 提供）

还有，另一个使用类似滚动技术的视差网站示例：

  • http://www.ascensionlatorre.com

答案＃1

试试这个。https://nicescroll.areaaperta.com/

它已经得到了

$().scrollTop()

jQuery 事件监听器，因此您可以使用视差脚本配置滚动路径。

答案＃2

我认为你必须结合其中的几种效果，才能制作出类似于路虎网站的东西。一个平滑滚动脚本、一个滚动路径脚本和一个视差脚本。

这是一个有趣的网站，关于那个网站的路径元素：http://joelb.me/scrollpath/

虽然了解这些网站如何运作的最好方式是亲自查看它们！一些使用视差效果的酷网站：https://www.awwwards.com/?s=parallax&post_type=all&search=Ok

我希望这能对你有所帮助或启发！