How Swift Navigator works?
The idea to have floating button on the page to scroll to the top of the page is not new, and there are many implementations available. This plugin takes this basic idea, and expands it with additional buttons you can configure, style and assign actions to.
For the most part, plugin relies on the jQuery powered main script. Still, it needs some CSS to control basic aspects of the position and open/close operations (using transitions).
Basic styling plugin uses resembles the style used for Google Android Material Design, but it can be changed completely to whatever you might need for your website. On top of all that, the plugin is able to directly use font based icons from Fontawesome font, or you can use custom HTML to add icons from any other font icons package.
Behind the scene with main jQuery Plugin
This plugin uses a unique approach to this idea, with the own jQuery plugin that takes user defined list of buttons and builds HTML for it. It starts with main, so called, swift button. Once that is rendered, plugin goes through the list of individual action buttons, and adds each one with own styling CSS, relative to the main swift button. Every element is rendered on its own. If the button action is a popup, the plugin adds additional HTML for the popup that will be displayed when user clicks popup button.
Handlers are attached to each button to take care of the button action (scroll to the top of the page, open custom URL or open popup).
Configure buttons with Navigator Builder
The first step is to configure buttons you want in the navigator. You can start with 2 default buttons, or you can add your own buttons. You can check out the video about the customization process that explains all aspects of the buttons styling.