javascript - change.org のようなファンシーなクイック スクロール

Question

change.org で嘆願書を読んだら、右上に css/html を使ったスクロールができます。div クラスの名前は quick-scroll です。ウェブで検索しましたが、何も見つかりませんでした。

自分のホームページにこのような素敵なクイックスクロールを含める方法のコードスニップまたは例を知っていますか? 私はあなたの助けに感謝します！:)

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:

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();
  });
});