Adding jQuery navigation arrow

I've always admired the little things a person does for their website. The last big update I made to my site was adding a built-in search box. One of the subtle touches I've wanted to add is adding a button that will bring a user back to the top of the page.

Here are the steps to add a button to return the user back to the top of the page for a Pelican theme. The core code in article was from a tutorial on codyhouse.co.

Backup your setup

This update will require editing a couple of critical files to your Pelican setup. Make sure you have a back up of your Pelican folder and Pelican theme folder.

Required content

For this function to work on your site, you need to have jQuery enabled on your site. jQuery has been added for 99% of the Pelican themes I've seen to date, but you need to make sure jQuery is active. To verify if jQuery is getting loaded, look at your base.html template and look for a line similar to this:

<script src="{{ SITEURL }}/theme/js/jquery-1.11.1.min.js" type="text/javascript"></script>

It will typically be located near other .js files that are being loaded by your Pelican theme.

In the event your theme doesn't load jQuery, add the following line to your base.html template:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

This will load a copy of jQuery from Google. Download a local copy to your webserver if you don't want to rely on a 3rd party's copy of jQuery.

Create new .js

Most of the magic with this update is in the javascript file that runs the jQuery functions. You'll need to create a new .js file and save it to your theme's js folder. In the rest of the example this .js file is called backtotop.js. The actual javascript is shown below:

jQuery(document).ready(function($){
    // browser window scroll (in pixels) after which the "back to top" link is shown
    var offset = 400,
        //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
        //offset_opacity = 1500,
        //duration of the top scrolling animation (in ms)
        scroll_top_duration = 1500,
        //grab the "back to top" link
        $back_to_top = $('.cd-top');

    //hide or show the "back to top" link
    $(window).scroll(function(){
        ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
        if( $(this).scrollTop() > offset_opacity ) { 
            $back_to_top.addClass('cd-fade-out');
        }
    });

    //smooth scroll to top
    $back_to_top.on('click', function(event){
        event.preventDefault();
        $('body,html').animate({
            scrollTop: 0 ,
            }, scroll_top_duration
        );
    });
});

The backtotop.js file (or however you called it) has an option setting of offset_opacity = 1500 that determines how far down a user has to navigate before the button will become opaque. On my site I have this commented out so the button is visible as soon as the var offset = 400 is hit.

Changes to base.html

The next step is to update your base.html template to include a couple of items to all of the html files generated for your site. Add the following line to the section of your base.html template file to load the backtotop.js file when someone visits your site. 

<script src="{{ SITEURL }}/theme/js/backtotop.js" type="text/javascript"></script>

Next, add the following line to the end of the body section just above the closing </body> tag. 

<a href="#0" class="cd-top">Top</a>

This will automatically add the needed link tags in all the HTML pages on your website.

Update main.css

Now we need to add a little style to our button. Add the following to your main.css file for your theme:

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: #21759B url(../img/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  border-radius: 10px;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #f09c05;
opacity: 1;
}

The code above will create a button that looks like this when activated:

Change colors and other properties to match your site's style. You can download the arrow image file from here: Arrow Image.

Reload site

With all of the changes in place, you'll need to basically reload your entire site to pass along the changes you've made to all of your site's HTML files. This requires clearing (aka deleting) everything in your output folder. If you have your site setup to delete the entire output folder each time it's generated, you can skip this step.

  1. Open a terminal window and ssh into your server.
  2. Navigate to your base folder for your website. A typical out of the box install of Pelican on a Linux box should have everything in the /var/www folder. Adjust accordingly to your setup.
  3. Change directories to the output folder. Make sure you're in your output folder before proceeding.
  4. Did I mention to make sure you're in the output folder before proceeding.
  5. Run rm -rf * in the output folder.
  6. Move back to your root Pelican folder with cd ...
  7. Regenerate your site with pelican content or sudo pelican content, depending on your setup.

Now re-open your site in your browser and scroll down a little bit on the page. On the right hand side you should see the button pop-up to take you back to the top.

Comments

Top