垂直滚动与对齐/对齐到 div/元素/锚答案

【问题标题】：Vertical scrolling with snap/align to div/element/anchor垂直滚动与对齐/对齐到 div/元素/锚
【发布时间】：2012-06-17 11:36:18
【问题描述】：

我发现了一些可爱的网站 - http://www.mini.jp/event_campaign/big-point/、http://www.twenty8twelve.com/ 和 http://www.scozzese.com - 都是垂直滚动的，并且都使用一种技术，当您滚动到新的“页面”时，会将“页面”与浏览器顶部对齐' - 即使您滚动到一半。

任何人都可以给我任何指示，例如我可以使用正确的术语/词来搜索更多信息，或者简要介绍该技术背后的基础知识，或者是否存在任何 jQuery 等插件我可以玩和学习？

我搜索了他们的代码，但没有跳出怎么做，我的 Javascript 和 jQuery 仍然是新手级别。

【问题讨论】：

【解决方案1】：

Javascript 有一些本机方法，例如 scroll(), scrollTo(), scrollBy()，您可以使用这些方法（通过一些技巧）平滑滚动页面。与offsetTop(), offsetLeft() 一起可以实现类似这些网站的效果。

还有很多 jQuery 插件（例如 google hit）可以为您节省大量工作。

只要搜索这些 Methodnames，我猜这应该会给你足够的点击率。

【讨论】：

【解决方案2】：

他们的滚动脚本不是很聪明。如果我通过反复单击向下箭头来向下滚动网页，则每次单击时，它都会向上滚动。所以不可避免地它不起作用。

【讨论】：

是的，所有这些垂直和垂直视差站点看起来都非常脆弱，并用字符串连接在一起：D。尽管如此，和他们一起玩还是很有趣的。如果我从建造一个中学到一些东西，这对我来说是双赢的，但我怀疑我永远不会在野外建造一个。

【解决方案3】：

基本滚动...

// Scroll
h = $(window).height();
t = $("mydiv").offset().top + $("mydiv").height();

if(t > h) {
    $(window).scrollTop(t - h);
}

【讨论】：