The following small article is about the JQuery plug-in “jquery.backtotop.my”. This JQuery Plugin I created and tested in the year 2014. The Project is the result from three days working with the Grunt NodeJS Taskrunner.
The plugin needs a redesign. However, the priorities are currently somewhere else. With today’s knowledge the tests would probably get better.
The functionality of the plugin is quite simple. The php.net website, for example, uses a «Back to Top» button. When the user clicks on the «Back to Top» icon, instead of immediately jumping to the content. The Website smoothly jumps with a little speed and with an ease-out effect to the beginning of the web page. Scrolled until the target, an HTML anchor, is reached. I have the ease-out effect at the end of the scrolling, was omitted from my version, because then JQuery Ui or the JQuery Easing plugin would be required. That would be a little too much of the good. But we will see. The plugin can be tested with QUnit per Grunt command. The CSS styles can be changed and easily compiled with Grunt by LESS in CSS.
- A scroll button with “Glyphicons” icons
- Button with FadeIn and FadeOut, if the web page text is above the screen height, the button is displayed.
- After pressing the button, a linear scroll follows the position of the target HTML anchor.
- Grunt und NodeJS
- NPM JQuery Init Scaffolding
- Twitter Bootstrap 3
- Copy für Iconfonts dist
You can view the program source on JQuery Backtotop.