$.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%; }