Support » Fixing WordPress » adding "back to top" button

  • Resolved newbie63

    (@newbie63)


    I’m new to WordPress. I want to add a “back to top” button within a page (after a post or a section on a static page) rather than at the bottom of the page. Thus, a user can get back to the top more quickly without scrolling so much.

    I found a forun thread somewhere (and can’t find it again, of course) that gave code which would slide the button in after the user scrolled down 800px. Sounds great but I’ve no clue how to find the single.php page on which to do this.

    Plugins I’ve tried put it at the bottom of the page. No good. If there’s a plug in that lets you designate where it goes, that would be great, but how to find it?

Viewing 13 replies - 1 through 13 (of 13 total)
  • you can do this quite simply

    Presume you know the difference between visual and text view in a post or page?

    If so then go into text view and put this at the top

    <a name="top"></a>
    At the place where you want the user to go to the top use the following:

    < a href="#top">TOP OF PAGE</a>

    Or whatever you want it to say

    for a static page, this should work fine

    For a page of posts, it should work, but have never tried it

    you’ll need to put the
    <a name="top"></a> at the start of the blogs page.

    Then in each blog, end it with

    < a href="#top">TOP OF PAGE</a>

    Let us know if this works

    I do know that there is a Visual and text view. But as I’ve always stayed in Visual view, let’s make sure that I understand what to do:
    After typing at the top of the page, I place the cursor at the point in the static page where I want the Back to the Top button to go, then switch over to text view and insert < a href=”#top”>TOP OF PAGE
    Is that correct?

    virtually, when you switch views, the curser will disappear, so you’ll need to position it, but otherwise yes !

    and it won’t be a button, just the text in capitals. You can do a button, but start with text and get that working. The google HTML button for further info

    Robin:
    It has taken me a while to try this. I’ve left it as is on the site if you want to take a look. I double checked that I did this all on the text not visual window/tab.

    I put at the top of the posts page “New Journeys”.

    I put < a href=”#top”>BACK TO TOP at the end of the post “Questions….”

    Now I notice that, on the editing text view, there is this little line of code at the very end:

     

    and what I see on the post on the actual site is the string of code:
    < a href=”#top”>BACK TO TOP

    Don’t know if the one has anything to do with the other. What do you think?

    can you post the url to your site and page so I can look

    OOPS! so sorry.

    use this,,i use this one,,very ligth and clean..

    http://wordpress.org/plugins/rrf-scroll-to-top/

    you still haven’t posted the url !

    I did. I even used the little link button! oh,well….Trying again

    journeysintolight.org

    Thanks, had a look and found the problem

    So Sorry – I did a typo

    it’s not

    < a href="#top">TOP OF PAGE</a>
    but

    <a href="#top">TOP OF PAGE</a>

    Typing too fast !

    Take out that space after the < and it’ll work !

    Robin:

    Yay! I had to deactivate another ‘back to top’ plugin that had put a button at the very bottom of the page. When it was activated, this code took you to the bottom of the page. Even then, that plugin didn’t work either. oh, well….

    This does work nicely, with minimum code.
    Thanks,
    N.

    pleased you’re sorted !

    hi,

    in functions.php

    /* Back To Top */
    
        add_action( 'wp_footer', 'back_to_top' );
        function back_to_top() {
        echo '<a id="totop" href="#">Back to Top</a>';
        }
    
        add_action( 'wp_head', 'back_to_top_style' );
        function back_to_top_style() {
        echo '<style type="text/css">
        #totop {
        position: fixed;
        right: 30px;
        bottom: 30px;
        display: none;
        outline: none;
        }
        </style>';
        }
    
        add_action( 'wp_footer', 'back_to_top_script' );
        function back_to_top_script() {
        echo '<script type="text/javascript">
        jQuery(document).ready(function($){
        $(window).scroll(function () {
        if ( $(this).scrollTop() > 500 )
        $("#totop").fadeIn();
        else
        $("#totop").fadeOut();
        });
    
        $("#totop").click(function () {
        $("body,html").animate({ scrollTop: 0 }, 800 );
        return false;
        });
        });
        </script>';
        }

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘adding "back to top" button’ is closed to new replies.