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

Question

如果您在 change.org 上阅读请愿书，您可以在右上角的 css/html 驱动滚动。div 类被命名为快速滚动。我在网上搜索它，但没有找到任何东西。

您知道如何将如此漂亮的快速滚动包含到您自己的主页的代码片段或示例吗？我感谢您的帮助！:)

Answer 1

我猜您正在寻找类似 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('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();
  });
});