$.mcToppy = function (options) {
var btn = $('<button></button>'),
defaults = {
css: {
position: 'fixed',
bottom: '16px',
right: '16px',
backgroundColor: '#FFF',
color: '#444',
padding: '4px 6px',
borderRadius: '4px',
display: 'none'
},
text: 'Top',
speed: 500,
callback: undefined
};
options = options || {};
options = $.extend({}, defaults, options);
btn.css(options.css).text(options.text).on('click', handle_click).appendTo('body');
$(window).on('scroll', handle_scroll);
function handle_scroll() {
if ($(this).scrollTop() != 0) {
btn.fadeIn('fast');
return;
}
btn.fadeOut('fast');
}
function handle_click() {
$('html,body').animate({
scrollTop: 0
}, options.speed).promise().done(options.callback);
}
};
$.mcToppy({
callback: function () {
alert('foo');
}
});
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod elit
lorem. Suspendisse potenti. Phasellus lacus justo, consectetur ac ornare
eget, varius id massa. Cras commodo, ligula non interdum malesuada, quam
lectus accumsan erat, sed rhoncus est ipsum a lectus. Nunc semper ligula
id neque interdum rutrum. Integer gravida feugiat ligula, eget facilisis
enim gravida ac. Vestibulum congue ullamcorper diam, quis venenatis enim
aliquam interdum. Mauris at enim lectus, nec blandit lacus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Vivamus scelerisque, tortor non tempus malesuada, magna enim elementum
ante, id molestie orci purus sit amet orci. Etiam vitae mauris mauris,
ac sodales sapien. Etiam tristique scelerisque arcu, a congue quam interdum
in. Vivamus in tincidunt odio. In hac habitasse platea dictumst. Curabitur
gravida sapien sit amet velit hendrerit bibendum. Maecenas sit amet lorem
in nulla feugiat convallis non id nisi.</p>
<p>Ut iaculis adipiscing massa eget porttitor. Donec rutrum odio eget est
cursus in sollicitudin eros imperdiet. Praesent fermentum tempus tincidunt.
Nam dapibus mollis ultricies. Phasellus ornare, nisi eget adipiscing dictum,
diam dui sagittis ante, nec posuere velit risus a arcu. Ut ultrices fermentum
condimentum. Suspendisse sit amet volutpat augue. Nullam interdum, arcu
at aliquam pretium, diam libero dapibus justo, vel placerat leo lacus id
metus. Vivamus blandit, massa nec volutpat fringilla, eros lectus hendrerit
lorem, ut porttitor arcu odio gravida nibh. Pellentesque tortor magna,
sodales sed scelerisque a, convallis commodo libero. Curabitur ut dictum
nisi. Quisque arcu purus, bibendum quis adipiscing et, condimentum ac felis.
Proin condimentum lobortis malesuada.</p>
<p>Praesent porta pellentesque felis, at condimentum mauris adipiscing id.
Vivamus accumsan, nisi sit amet malesuada malesuada, mi est ultrices lacus,
at adipiscing purus velit ac purus. Nullam magna dui, tincidunt et gravida
ac, ornare sed purus. In quis metus id tortor facilisis lobortis. Etiam
consectetur laoreet nibh sagittis mollis. In lacinia diam non leo luctus
vehicula. Maecenas eu ante metus, quis semper elit. Mauris nibh elit, aliquet
at convallis sit amet, sodales non elit. Etiam malesuada porta faucibus.
Donec ipsum nisl, molestie in ornare feugiat, pulvinar ac eros. Nullam
dapibus ante eget odio pulvinar vitae rhoncus turpis pretium. Morbi pharetra
auctor ipsum, eget venenatis magna venenatis ullamcorper. Ut hendrerit
mattis est, quis gravida velit feugiat id. Sed porttitor dui non diam dictum
aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; In vulputate sodales iaculis.</p>
<p>Nam sodales sagittis elit, eu interdum enim aliquet eleifend. Sed auctor
sem ut diam commodo vel blandit lorem scelerisque. Nullam adipiscing leo
ut odio varius auctor. Sed euismod ultricies ornare. Fusce luctus quam
nec nisl sodales sed dapibus purus placerat. Nunc et sapien urna, quis
tincidunt ligula. Curabitur in massa ante, luctus consequat lorem.</p>
<p>Aliquam porta faucibus mi sit amet lobortis. Donec commodo tristique ipsum,
ac imperdiet nisl bibendum nec. Suspendisse sollicitudin egestas ipsum
eget viverra. Mauris consequat pretium accumsan. Aliquam eu massa lorem,
id laoreet quam. Phasellus vel urna sit amet quam aliquam varius. Etiam
mi nunc, suscipit a vulputate sit amet, congue tempor justo. Praesent ut
posuere sapien.</p>
<p>
p {
padding: 10px;
width: 60%;
}