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 is here! It includes security fixes and requires PHP 7.0. We have therefore ALSO released Vanilla 2.5.2 with security patches if you are still on PHP 5.6 to give you additional time to upgrade.

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