Announcement

Collapse
No announcement yet.

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

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

  • 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.



  • #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

    TalkNewsUK - My vBulletin 5.5.4 Demo
    AdminAmmo - My Cloud Demo

    Comment


    • #3
      Nice sharing!

      Comment


      • #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 Glenn Vergara; Tue 25th Feb '14, 11:24am.

        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

        Comment


        • #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 User0223423; Tue 25th Feb '14, 11:29pm.

          Comment


          • #6
            Originally posted by GuiltyNL View Post
            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?

            GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

            Comment


            • #7
              All the pages. Wi try tomorrow again!

              Comment

              Related Topics

              Collapse

              Working...
              X