The starting point
After looking at the code I was frustrated about many aspects of it, in summary:
- Everytime the resize event was called jQuery was basically re-creating the button;
So I came up with this improve version. I hope you’ll enjoy it, since it fixes all the above problems, adds a little animation thanks to jQuery and CSS
animations (yes again ) and tries to be more responsive and less intrusive on the webpage.
How it works
I’ve associated the button to the scroll event . This event is only fired in jQuery if the element is scrollable which means that the window height is smaller than the document height .
- Since 98% of the script is handle through CSS, you can event adapt the button layout according to media queries to workaround more easily the
position:fixedproblems on smartphone for exemple. Use your imagination
- Making a WordPress plugin out of it to ease it’s integration… Done!!
Download the WordPress plugin
- I’ve removed the used of jQuery’s
fadeOutand replaced them with
CSS3 transitions. By doing so, I’m no longer firing continually the fadeIn animation everytime the page is scrolled;
- Fixed the annoying double click issue;