Working 'Back to Top' link in the Footer? Here is how you do it!

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Guest

    Working 'Back to Top' link in the Footer? Here is how you do it!

    Like anyone else, I was struggling to get a simple 'Back to Top' button working in vBulletin 5. Some suggestions did work, but redirected me to the top of the homepage instead of the top of the current page.

    I tried Wayne's Blog-post, but that didn't work. It ended up with a part of text on my site that didn't do anything. Modifying his code worked, but it was still in a strange place. Also the animation was ignored for some reason and I was unable to figure it out why. And to be honest I didn't care about the animation, I just wanted a simple back to top button.

    After that I tried his other suggestion which can be found here. Also that option didn't work as expected. The animation was ignored and it took me every time to the top of the homepage (root).

    So, together with our developer, we made a very, very simple but effective solution that actually works very well and looks nice. The only thing is it doesn't have any animation.

    Here is how you do it:
    1. Login as Admin or an other account with Site Builder permission
    2. Enable 'Edit Site'
    3. Click 'Footer' in the top bar
    4. Click 'New Navigation Item'
    5. Name is 'Top'
    6. In 'Target URL' put the following:
      Code:
      "#" onclick = "var s = window.location.pathname; window.location = s.replace('#','') + '#';return false;"
    7. Click 'OK'
    8. Click 'Save Changes'
    9. And you are done.


  • Mark.B
    vBulletin Support
    • Feb 2004
    • 24286
    • 6.0.X

    #2
    Thank you for posting this. Will be very useful as I know this has been asked about a few times.

    (I have moved it to Tutorials as that seems to be where other similar tips and instructions are going).
    MARK.B
    vBulletin Support
    ------------
    My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
    My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

    Comment

    • TLMD
      Senior Member
      • Sep 2012
      • 1766
      • 5.6.X

      #3
      Nice sharing!

      Comment

      • glennrocksvb
        Former vBulletin Developer
        • Mar 2011
        • 4011
        • 5.7.X

        #4
        That code can be simplified to:

        Code:
        "#top" onclick="location.hash=this.hash; return false;"
        Or if you don't want to have a hash in the URL:

        Code:
        "#top" onclick="window.scrollTo(0,0); return false;"
        With animation:
        Code:
        "#top" onclick="$('html,body').animate({scrollTop: 0}, 'slow'); return false;"
        Last edited by glennrocksvb; Tue 25 Feb '14, 11:24am.

        Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

        Comment

        • Guest

          #5
          Thanks! Where were you in the last year?

          Edit the second and third one work well, the first one doesn't do anything (Chrome 33)
          Last edited by Guest; Tue 25 Feb '14, 11:29pm.

          Comment

          • glennrocksvb
            Former vBulletin Developer
            • Mar 2011
            • 4011
            • 5.7.X

            #6
            Originally posted by GuiltyNL
            Edit the second and third one work well, the first one doesn't do anything (Chrome 33)
            I tested (by manually adding the link via dev tools) the first one in Chrome 33 too and it works. Does it not work for you in all the pages or in some pages only?

            Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

            Comment

            • Guest

              #7
              All the pages. Wi try tomorrow again!

              Comment

              Related Topics

              Collapse

              Working...