JavaScript - 如何平滑地滚动到下一个锚点?怎么做?

7
我正在构建一个单页网站,其中每个部分都会填满用户的窗口;我已经实现了这个功能。
我想要做的是:
当用户向上或向下滚动时,他/她会平稳地滑动到前面或后面的部分。我的每个部分顶部都有一个锚点。
以下是我想要实现的示例。每篇文章都占据整个页面。一旦您滚动,就会跳转到下一篇文章。 http://www.made-my-day.com/

你确定要这样做吗?这会破坏用户期望的默认滚动行为。 - Stuart
我确定这个很简单的页面是我想要用来做什么的。它更像是一个设计实验而不是一个信息性网站。 - Leopold Kristjansson
3个回答

5

4
你应该看看scrolloramasuperscrollorama。它们有很多酷炫的滚动效果,包括刚才提供的网站的效果。
--更新--
在与OP交谈后,我意识到这两个库都不能实现他想要的功能。因此,我的新建议是reveal-js,一个js演示库。

那里有很多漂亮的滚动效果,但我似乎没有找到这个?我是不是错过了什么显而易见的东西? - Leopold Kristjansson
你想做的就像是在scrollorama和superscrollorama上都“固定”它,对吗? - josemando
不完全是。我在发布的示例网站(http://www.made-my-day.com)上发生的情况是,一旦您开始使用鼠标滚轮(或鼠标垫上的两个手指等)滚动,您就会开始在文章之间“翻页”。每篇文章始终完全填充屏幕。这样,您永远不会处于两篇文章之间,而是始终可以完整地查看它们... - Leopold Kristjansson
@LeopoldKristjansson 对不起,我第一次查看网站时,由于某种原因,我认为它类似于固定它。这里有另一个库,虽然不完全相同,但是它是我能想到的最佳匹配。我正在编辑我的答案以包括它。 - josemando
reveal-js库看起来更像了!非常感谢您先生! - Leopold Kristjansson

0

你真的不想在onscroll上这样做。请考虑,onscroll实际上只是一个事件,它表示“页面视图正在移动”。

这并不意味着他们正在使用鼠标滚轮来完成。

在手机上,你的计划可能是有意义的:那么它就像是将拖动动作等同于滑动动作。太好了。

我首选的滚动方法是点击中间鼠标按钮,然后将鼠标定位在锚点下方,这样我可以在每个文本块从屏幕上滚过时阅读它。

对于长文本块,我甚至不需要手握鼠标。

因此,在我的情况下,onscroll将以大约60个事件/秒的速度触发,如果你自动跳转文章,我将通过整个站点的内容进行瞬间移动。

其他人仍然拖动实际的滚动条。

监听鼠标滚轮和键(上/下,pg-up/pg-down),而不仅仅是任何移动页面的方法,更加安全......但您确定所有文章都足够小,以便所有内容适合所有浏览器窗口,即使在愚蠢的小分辨率(iPhone 3)下也是如此吗?

因为如果人们需要滚动才能阅读内容,那么你就需要处理一个更加复杂的解决方案:
你需要监听任何类型的常规(或自定义)滚动请求,以到达当前内容的底部......然后你需要向用户提供某种视觉提示,告诉他们现在已经到达内容的最底部,并且继续使用触发方法(滑动/拖动/按键/鼠标滚轮)将切换文章。

前两个没问题......让它感觉像智能手机一样有弹簧效果。
......那其他两个呢?人们可能希望在一秒钟内多次点击它们,以到达他们想去的地方。


谢谢你的建议!在我正在构建的网站上,每个部分都有很少的文本/信息 - 这基本上意味着它已经可以在非常小的移动屏幕上工作了(至少我测试过的所有屏幕都是如此)。它还使用媒体查询,并为移动设备提供略微不同的版本。 - Leopold Kristjansson

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接