coding主页效果

Question

原本把问题问得很长很长
想想没什么必要
就简单问问题就好
coding主页的效果(未登陆)
点击位于页面右方的点能到页面指定的区域,带滚动动画
这个大概能想到怎么做
问题是怎样实现用鼠标滑轮滚动时也实现同样的效果?
coding首页

Answer 1

有个插件叫 FullPage.js，你可以用这个轮子。

当然，自己实现这个轮子也很简单。
每个页面都设置一个 id，每个点都是<a>，然后其 href 就设置为 '#' + 对应页面的id
比如 <a href="#first-block">

用 jQuery 对这些 a 标签绑定一个 click 事件，用 event.preventDefault() 去掉点击马上跳过去的功能，然后用 jQuery 的 animate() 去控制滚动条就好了。

$("a").on('click', function(event){
    var $anchor = $(this);
    $("html, body").stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 600);
    event.preventDefault();
});

鼠标点击大概就是这个思路。

鼠标滚轮其实也差不多的思路。

Answer 2

题主说的那个动画效果，coding采用的应该只是简单的css3动画，通过css3的动画类，很简单的几行代码就能达到这种效果。
你如果用IE8去访问coding，它会提示你浏览器版本过低，因为IE8是不支持css3动画效果的，甚至IE9可能也会提示你（我这没有所以无法最终确认）。
css3动画教程：
http://www.w3cschool.cc/css3/css3-animations.html
并且coding使用了AngularJS这种“高大上”的js框架，配合css3实现这种动画效果更是易如反掌。
当然，楼上童鞋回答的是jquery的方案，类似这种效果的插件我相信是有更丰富的现成解决方案的。