Back to the top and breadcrumbs

[humpty]

Can we have a 'back to the top' button/link on pages please. My members are asking for this as they find it really useful. Would it also be possible to have a breadcrumb trail at the bottom of each page too - both of these would be very helpful especially for long pages.

[Mark.B]

You'll need to put these in the tracker:
vB5 Improvement request

http://tracker.vbulletin.com/secure/CreateIssue.jspa?pid=10091&issuetype=4

vB5 New Feature

http://tracker.vbulletin.com/secure/CreateIssue.jspa?pid=10091&issuetype=2

However, for a simple "Back to top" link, see Wayne's blog HERE - shows you exactly how to do this using the new template hook system in vB5.

[humpty]

Tried Wayne's template and hook but it doesn't work - the text for the link is there but it does nothing. I copied everything as directed and created the Hook (system is active) but nada!!

[Mark.B]

Works fine for me on Beta 24.

Make sure you are using a default style and try going through all the steps again.

[humpty]

Redone the whole thing again - see screen captures:



Doing the above returns this:



But the link is inactive and doesn't work. Any ideas?

BTW I'm on Beta 24 too

[DemOnstar]

I have the back to top link on my experiment with VB 5, it works well for me too.

By the way,

Would it also be possible to have a breadcrumb trail at the bottom of each page too - It would be very helpful especially for long pages.

Is a good idea. You gonna put it in as a new feature or am I?

- - - Updated - - -

I see you have already done it, good stuff.......

[humpty]

Anyone any ideas why the back to the top link doesn't work? See post #5

[Wayne Luke]

Anyone any ideas why the back to the top link doesn't work? See post #5

Can't really tell by screenshots. By them, it should work. Need to see the page to see what errors are being thrown and causing the Javascript not to work.

[humpty]

Try it out at www.just4joe.com - there's no errors being flagged, the link is just dead as though it were plain text.

[Mark.B]

The link is not actually a link, something is wrong there.

Please raise a support ticket for my attention, and include an admin cp login in the "Sensitive Data" section, and I'll take a look for you.

[Wayne Luke]

The link is not actually a link, something is wrong there.

Please raise a support ticket for my attention, and include an admin cp login in the "Sensitive Data" section, and I'll take a look for you.

It isn't supposed to be a link, just act like one.

The function doesn't work because it is missing text. The words ^Back to Top should be enclosed in a DIV with the ID of toTop. It seems the blog entry ate part of the code for some reason. I am sorry about that.

The last line of the template should be:

<div id="toTop">^ Back to Top</div><div class="clear"></div>

The whole footer_goto_top template should be:

<style>
#toTop {
  float:right;
}

div#toTop:hover { cursor: hand; cursor: pointer; }
#toTop:after {clear:both;}

</style>
<script type="text/javascript">
$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();    
        } else {
            $('#toTop').fadeOut();
        }
    });
 
    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });    
});
</script>
<div id="toTop">^ Back to Top</div><div class="clear"></div>

I've updated the blog post as well. I am sorry for the confusion.

[humpty]

Works a treat thanks for that Wayne; I know what it can be like when bits go missing lol.

Nicely done!

[Guest]

Would it also be possible to have a breadcrumb trail at the bottom of each page too - both of these would be very helpful especially for long pages.

Here is how you do that:

http://www.vbulletin.com/forum/node/4021819