垂直滚动,使用snap / align to div / element / anchor

时间:2012-06-14 12:26:24

标签: javascript jquery html scroll vertical-scrolling

我找到了一些可爱的网站 - http://www.mini.jp/event_campaign/big-point/http://www.twenty8twelve.com/http://www.scozzese.com - 所有垂直滚动,所有这些都使用了一种技术,当您使用“页面”与浏览器顶部对齐时滚动到一个新的“页面” - 即使你滚动到一半。

任何人都可以给我任何指示,例如我可以用来搜索更多信息的正确术语/单词,或者介绍这种技术背后的基础知识,或者如果存在任何jQuery等插件,我可以玩和学习吗?

我搜索了他们的代码但没有跳出来如何做,我的Javascript和jQuery仍然是新手级别。

3 个答案:

答案 0 :(得分:2)

Javascript有一些本地方法,如scroll(), scrollTo(), scrollBy(),您可以使用这些方法(有一些技巧)来平滑地滚动页面。与offsetTop(), offsetLeft()一起,您可以在这些网站上实现效果。

还有很多jQuery插件(例如像google hit这样)来为您节省大量的工作。

只需搜索这些方法名称,这应该会给你足够的点击量。

答案 1 :(得分:2)

基本滚动...

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

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

答案 2 :(得分:0)

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