像change.org上的花式快速滚动

时间:2013-04-28 23:17:47

标签: javascript html5 css3 scroll

如果你在change.org上阅读请愿书,你可以在右上方的css / html动力滚动。 div类名为quick-scroll。我在网上搜索了它,但没有找到任何东西。

你知道代码片段或示例如何将这么好的快速滚动包含到你自己的主页吗?我感谢您的帮助! :)

1 个答案:

答案 0 :(得分:0)

我猜你在寻找像scrollTo这样的东西?

http://flesler.com/jquery/scrollTo/

你也可以在没有插件的情况下使用jQuery。 只需使用锚点并滚动到预定义的div,例如你有一个这样的菜单:

<ul class="nav">
 <li><a href="#area-a">Option A</a></li>
 <li><a href="#area-b">Option B</a></li>
 <li><a href="#area-c">Option C</a></li>
</ul>

这样的内容:

<div id="area-a"></div>
<div id="area-b"></div>
<div id="area-c"></div>

JQUERY:

jQuery('ul.nav a').bind('click',function(event){
var $anchor = jQuery(this);

jQuery('html, body').stop().animate({
  scrollTop: jQuery($anchor.attr('href')).offset().top - 60 },
   1500, 'easeInOutExpo');
  event.preventDefault();
  });
});