如何建立一个像tumblr这样的过渡主页？答案

【问题标题】：how to build a transition homepage like tumblr?如何建立一个像tumblr这样的过渡主页？
【发布时间】：2012-01-30 17:05:16
【问题描述】：

我想建立一个类似tumblr主页的网站。在那个页面上，当我们点击“30 reason”链接时，它会加载一个新页面，据我所知，它仍然在相同的页面上。（如果不是同一页，请更正。）首先，我想问一下，tumblr 做了什么技术来实现这一点？我的意思是使用 jquery、javascript 或 ajax？是否有任何图书馆可供我们使用？

第二，在跳转到下页的时候，是一个一个加载数据，还是一次性加载所有数据？

非常感谢您的回答。谢谢。

【问题讨论】：

你试过看源码吗？
@AlexHadley 是的，我已经看过源代码了，但是我是编程语言的新手，所以我不太了解它。

标签： javascript jquery ajax tumblr

【解决方案1】：

嗯，使用jQuery很容易实现效果。

查看 scrollTop() 以类似的方式处理页面动画...

$('body').animate({scrollTop: $('#lower_content').offset().top + 'px'}, 1000);

...假设您有一个 ID 为“lower_content”的元素，这自然取决于您网站的整个布局。至少不知道自己在做什么，就去这里有点过分了。

至于加载东西 - 绝对只加载你需要的东西。一次加载“所有数据”有点模棱两可，但听起来绝对是个坏主意。查看 jquery 的 $.ajax() 那个。对于函数的完全运行来说再次太复杂了。但是对于刚接触 jquery 的称职程序员来说，这些技巧应该可以帮助您入门。

【讨论】：

我认为 OP 想知道是否要 i）将每个“部分”分成不同的文件/页面并单独加载它们（n 页面加载）或 ii）制作它们进入一页，有 3 个<div>s，这意味着 1 个页面加载。

【解决方案2】：

它是使用 margin-top css 样式完成的。最初他们将 margin-top 设置为 0px。单击“30 个原因”时，该值设置为负数。这会有点生涩。他们使用新的过渡 css 属性（对于基于 webkit 的浏览器）平滑了过渡。作为旧浏览器（和 IE9）的后备方案，已使用 jQuery 或类似框架。

【讨论】：