Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
Vanilla 2.6.1 is here with critical security patches. One of them has been publicly disclosed.

[HowTo] Back to Top*

vrijvlindervrijvlinder Papillon-Sauvage MVP
edited August 2013 in Tutorials

Here is a neat script specially if you have a very long forum with lot's of content. This will put a back up image and link and make the page scroll back up to the top in a flash.

You can change the image or remove it and use text instead...

be sure that if you copy this off here that you remove the spaces I put in between the < > tags so they would show here.

You would put this in the master view of your theme in the foot section after the last div

< p id="back-top" style="float: right;bottom:0px; display: inline-block; position:absolute;right:0px;" >< a href="#top" title="Back to Top">< img src="http://vrijvlinder.com/forum/themes/VrijVlinder/design/images/back-up1.png" >< /a >< /p >
< script type="text/javascript" > 
$(document).ready(function() {

// hide #back-top first
    $("#back-top").hide();
    
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});
< /script >

Comments

Sign In or Register to comment.