Return to Top link in HTML5 themes: How to set it up?

Community Forums Forums General Discussion Return to Top link in HTML5 themes: How to set it up?

This topic is: not resolved

Tagged: ,

This topic contains 9 replies, has 5 voices, and was last updated by  Victor Font 6 months, 1 week ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #63056

    podgor
    Participant
    Post count: 24

    Hi,

    Since Return to Top Link doesn’t work in HTML5 themes, I did the following:

    I added a text widget to the header widget area and wrote into it (without giving the text widget a name): <a name="top"/>

    Into Genesis Simple Edits Plugin I did this:
    [footer_backtotop text="Top" href="#top"]

    Return to Top Link is still inactive since it seems to remain anchored to the DEFAULT:#wrap div.

    Somebody suggested I should make make an anchor like <span id="top"></span>
    I have no idea where this anchor should be placed.

    Any suggestions?

    • This topic was modified 11 months, 1 week ago by  podgor.
    • This topic was modified 11 months, 1 week ago by  podgor.
    http://www.test69kq.elallo.net
    #63139

    Sridhar Katakam
    Participant
    Post count: 954
    #63280

    podgor
    Participant
    Post count: 24

    Hi Sridhar,

    Thank you very much for your extremely useful link!

    Although I’m no expert at all, I managed :-)
    And also thanks for sharing so many tips on your blog (which i’m following now).

    However, one thing I didn’t quite get is the section “Add our custom back to top shortcode in Footer”.
    I’m not sure where to place the code you provide. If you have time, please let me know.

    Note: since I didn’t know where to paste the mentioned code, I’ve been using Genesis Simple Edits Plugin (which I activated after adding the shortcode you kindly provided).
    The “Return to Top” link is therefore not integrated into my Footer but placed below it.
    Please see for yourself: http://www.test69kq.elallo.net

    Cheers.

    • This reply was modified 11 months ago by  podgor.
    • This reply was modified 11 months ago by  podgor.
    • This reply was modified 11 months ago by  podgor.
    • This reply was modified 11 months ago by  podgor.
    • This reply was modified 11 months ago by  podgor.
    • This reply was modified 11 months ago by  podgor.
    #63325

    Sridhar Katakam
    Participant
    Post count: 954

    I have updated my blog post and added that the code should be pasted in child theme’s functions.php.


    #78466

    macmeister
    Participant
    Post count: 2

    Thanks for the wonderful contributions! This is an excellent addition for scrolling to the top. Is there an alternative to scroll to the content area?

    We’re setting up a website for blind people. The popular (accessible) thing to do is have a link at the top that only shows up for them (-50px off the top of screen), allowing to “Skip Navigation”, anchoring to the content area.

    A cure could be placing an ID=”content” in “site-inner” or “wrap”. Is this possible without too much effort?

    #78483

    Sridhar Katakam
    Participant
    Post count: 954

    Add this in functions.php:

    add_filter( 'genesis_attr_content', 'custom_attributes_content' );
    
    function custom_attributes_content( $attributes ) {
      $attributes['id']     = 'content';
      return $attributes;
    }

    Source: https://gist.github.com/vajrasar/6682790


    #89126

    welshgirl
    Member
    Post count: 8

    Dear Sridhar,

    I am not comfortable fiddling with code, style sheets or anything as I know if I break something I won’t know how to fix it! Which is why I have used Simple Edits to amend the text etc., at the bottom of my website. In fact I just copied and pasted into it what I was told to by a friend…

    This is what is in it: -

    <div class=”gototop”><p>[footer_backtotop]</p></div><div class=”creds”><p> All rights reserved”>All content Copyright © 2014 All rights reserved · Privacy Policy</p></div>

    And the page links work but the ‘return to top of page’ doesn’t and it just puts this in the URL bar http://supportenvironment.com/#wrap

    I was wondering if this is related to what you’re talking about above (I am using the Agency Pro theme)?

    And if you could please tell me exactly what to copy and paste where on my site’s backend to fix this.

    I have read your very useful post but to be frank it confused me as I am not technically minded at all.

    I would be very, very grateful if you could please do me an idiots guide to what to copy and paste to make this function work!

    If it’s not simple then don’t worry, I will just do without it!

    Thank you very much…

    #89348

    Victor Font
    Participant
    Post count: 66

    #welshgirl, I think this article may help you. http://victorfont.com/genesis-html5-return-top-tutorial/. If you need any further clarification, please leave a comment and I’ll respond accordingly.

    • This reply was modified 6 months, 1 week ago by  Victor Font.
    • This reply was modified 6 months, 1 week ago by  Victor Font.
    #89664

    welshgirl
    Member
    Post count: 8

    Dear Victor,

    thank you, I just followed your very clearly written tutorial and it works! Thank you for making it simple for a non-technical person like me.

    I am very grateful.

    #89726

    Victor Font
    Participant
    Post count: 66

    You’re welcome welshgirl. Glad I could help.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.