始终使用 jQuery 将单页站点与特定点对齐

Question

我想知道是否有人遇到过，或者知道从哪里开始编写jQuery脚本，当您滚动到某个点时，该脚本将始终跳转到网站上的特定点。例如，以这个网站 http://www.bettondesignwork.co.uk/sierragrande 为例，它是一个由 4 个全尺寸div 组成的单页网站，您可以导航到或滚动浏览，但是当您滚动以便一个div 的底部和另一个div 的顶部都可见时，脚本会将最可见的div 对齐回页面中心？

我知道这有点冗长，但我的jQuery知识相当有限，不确定我将如何开始这个。如果有人有任何线索，我很想听听你的想法。

Answer 1

jQM中内置了一个很好的解决方案。因为你不能在jQM中使用锚链接（除非你使用data-ajax="false"，但这是另一个问题），jQM开发人员构建了内部功能来模拟这一点：

 $('a.anchor-class').live('click', function(ev) {
     var target = $( $(this).attr('href') ).get(0).offsetTop;
     $.mobile.silentScroll(target);
     return false;
 });

更多信息可以在这里找到：http://jquerymobile.com/demos/1.0/docs/api/methods.html

当然，使用顶级示例来创建自己的逻辑。

您应该使用 scrollstart scrollend 事件来查找您当前的位置，将其与您的div 集合匹配，并在需要时滚动到所需的位置。