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

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