Sridhar Katakam

Genesis and WordPress Tutorials

Add a working “Return to top of page” footer link in Genesis

by 32 Comments

Not sure if it's just me or not, but I have noticed that [[footer_backtotop]] shortcode added in the footer via genesis_footer_creds_text filter does not work. Clicking on the "Return to top of page" footer link does not lead anywhere. My guess (being new to Genesis) is that with the release of Genesis v2.0, there have been structural changes and this shortcode has not been updated yet as it's still looking for a #wrap that does not exist.

Anyway, let's fix and in fact enhance this by making the scrolling to top action smooth using the method in this post. Another minor visual benefit is that after the go to top link is clicked, the URL of the page remains the same.

Screen Shot 2013-09-11 at 12.00.16 PM

Step 1

Create a file named say, sitewide.js having the following and upload it to child theme's js (create, if not existing) directory:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Hi Sridhar, thanks for creating this blog post. I have sucessfully added the button and it works, but the Javascript does not. Can you tell me if I am supposed to enqueue jQuery before I add this feature? Here is a link to the project I am working on: http://151.252.1.90/~av/. I copied the script into the JS file in Genesis extender which normally works without having to add a new JS file to the child theme. Any ideas?

    Reply

  • Hi Sridhar, thank you very much for your help with your brilliant article. Worked straight away, and then also noticed your bonus CSS, very nice touch! Hoping Sachin gets a 100 tomorrow!! 🙂

    Reply

  • Thank you VERY much for this tutorial, I was going crazy trying to find a solution for this. Now I was wondering if it would be possible to do the same for a “Back to bottom” button. I can’t seem to find out what the new anchor for the footer is. Thanks again!

    Reply

  • Hi Sridar, I have used this technique a number of times now and I just wanted to say thanks again for writing this post. I have one general question about adding jQuery: I notice in this tutorial you did not enqueue jQuery to get the ‘scroll to top’ working. I have read a number of articles on using Genesis and jQuery. Some people say to use the Google CDN while others say to use jQuery that ships with WordPress. I am in my first year of web development but I would like to add elements of jQuery on my web projects. Can you give us your opinion on this subject? I have used Google CDN on a few projects, but it sometimes breaks other plugins like Nivo Slider or I have to rewrite the $ sign with ‘jQuery’. Most of what I have been doing seems like a bit of a hack. If you have any blog posts on this subject, could you add a link to them somewhere in your reply?

    Reply

  • I extended your awesome tutorial!

    Inside the functions file in the add_shortcode code section I changed your code into this:

    ⇪

    The arrow up is actually just a pasted in utf-8 code in which I removed all of the code except the arrow that showed up after I pasted it in from the keyboard symbols from my Mac, and it worked..:)

    CSS that I used:

    /* Code from http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/ */

    .tooltip{
    display: inline;
    position: relative;

    margin: 0 0 0 10%;
    padding: 0.9em 1.5em;
    color: #fff;
    background: #000;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    text-align:center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

    }

    a.tooltip:hover {
    color: red;
    }

    .tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 45px;
    color: #fff;
    content: attr(title);
    left: 100%;
    padding: 5px 5px;
    position: absolute;
    z-index: 98;
    width: 90px;
    }

    .tooltip:hover:before{
    border: none;
    border-color: #333 transparent;
    border-width: 6px 6px 6px0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    }

    Perhaps you could just add it into your tutorial?

    Reply

  • Wow! I came to fix the “Return to top” problem of Genesis but I got a better solution. Thanks for mentioning the plugin Dynamic “To Top” Plugin.’

    Cheers! 🙂

    Reply
    • >