javascript 使用鼠标滚轮和滚动条平滑垂直页面滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10517460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth vertical page scrolling using mouse wheel and scroll bar
提问by DBUK
I am playing around and trying to build a parallax website - yes, I know they are an annoying fad but I would still like to have a go. So, for inspiration, I have been looking at various examples of good parallax websites and came across this one: https://victoriabeckham.landrover.com/INT.
我正在玩，并试图建立一个视差网站 - 是的，我知道它们是一种令人讨厌的时尚，但我仍然想试一试。因此，为了获得灵感，我一直在查看各种优秀视差网站的示例，并发现了这个：https: //victoriabeckham.landrover.com/INT。
It has smooth scrolling using the mouse wheel, scrollbar, and anchor links. I have been searching for jQuery plugins that would achieve this effect but can only seem to find ones that use internal page links - anchor or ID's (detailed below) - but, not mouse wheel and scrollbar. There is a good chance that I am searching using the wrong keywords. Does anyone know the correct terminology to find these plugins or know any plugins that would achieve this effect?
它可以使用鼠标滚轮、滚动条和锚链接平滑滚动。我一直在寻找可以实现这种效果的 jQuery 插件，但似乎只能找到使用内部页面链接的插件 - 锚点或 ID（详见下文） - 但不能找到鼠标滚轮和滚动条。我很有可能使用错误的关键字进行搜索。有谁知道找到这些插件的正确术语或知道任何可以实现这种效果的插件？
On a side note, I am currently learning jQuery and Javascript but am in the very early stages - still trawling through codeacademy and not made it onto any real world code yet. So at the moment I am playing with plugins as a way of learning but hopefully in a few months I can build my own stuff!
附带说明一下，我目前正在学习 jQuery 和 Javascript，但处于非常早期的阶段 - 仍然在 codeacademy 中摸索，尚未将其应用于任何现实世界的代码。所以目前我正在使用插件作为一种学习方式，但希望几个月后我可以构建自己的东西！
Smooth scrolling to anchor tags or ID's:
平滑滚动到锚标签或 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/(*courtesy of @DrunkRocketeer)
- 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提供）
And, another example of a parallax website using a similar technique for scrolling:
并且，另一个使用类似滚动技术的视差网站示例：
采纳答案by anuj_io
Try this one. https://nicescroll.areaaperta.com/
试试这个。https://nicescroll.areaaperta.com/
It has got
它有
$().scrollTop()
jQuery event listener too so you can have scroll path configured with parallax script.
jQuery 事件侦听器，因此您可以使用视差脚本配置滚动路径。
回答by anuj_io
I think you have to combine several of these effects in order to make something that resembles the Landrover site. A Smooth scroll script, a scroll path script and a parallax script.
我认为你必须结合这些效果中的几个才能制作出类似于 Landrover 网站的东西。平滑滚动脚本、滚动路径脚本和视差脚本。
This is an interesting site for the path element of that website: http://joelb.me/scrollpath/
这是该网站的路径元素的有趣网站：http: //joelb.me/scrollpath/
Though the best way to find out how these sites work is to examine them! Some cool sites useing parallax: http://www.awwwards.com/?s=parallax&post_type=all&search=Ok
虽然找出这些网站如何工作的最好方法是检查它们！一些使用视差的酷网站：http://www.awwwards.com/?s=parallax&post_type=all&search=Ok
I hope this was of some help/inspiration!
我希望这是一些帮助/灵感！
