スクロール追尾ボタンをつくる

スクロール追尾ボタンをつくりたい

そこで...sticky
https://github.com/garand/sticky

When the target element is about to be hidden, the plugin will add the class className to it (and to a wrapper added as its parent), set it to position: fixed and calculate its new top, based on the element's height, the page height and the topSpacing and bottomSpacing options.

結果、こんな感じで

<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/garand-sticky/jquery.sticky.js"></script>
<a href="javascript:void(0)" id="sticky_button">ボタン</a>

$(document).ready(function() {
	$("#sticky_button").sticky({ 
		zIndex: 1000, // 重なってしまわぬよう 
		center: true
	});
});

ちなみにボタンはcssで
CSSだけで作るアイコン付きボタンの作り方 : アシアルブログ

少し修正して利用
例えば、以下の機能はブラウザによって利用できないので...

background-image: -webkit-linear-gradient(top, #FC0, #F60);

こうするとか

background: linear-gradient(#1D62F0, #05FBFF);

こんなものもあるのか...
CSSのposition:stickyがすごく便利 | q-Az