HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

[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

  • When you say "in the master view of your theme in the foot section after the last div" — that means default.master.tpl, correct? I'm using the Embed-Friendly theme and have tried putting it after each of the divs at the end:

    <div id="Foot"> <div><a href="{vanillaurl}"><span>Powered by Vanilla</span></a></div> {asset name="Foot"} </div> </div> </body> </html>

    I keep getting a Bonk error. What am I doing wrong?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    If you are going to add script to a tpl you need to put the script between {literal} script here{/literal}

    I have not tested this on a tpl based theme, only on a php based theme.

  • hgtonighthgtonight ∞ · New Moderator

    @Celeste You can use the Jump To Top plugin to add this without modifying your theme. /shameless plug

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yea this will probably work better than adding script to the tpl , Thanks for making this @hgtonight !

  • hgtonighthgtonight ∞ · New Moderator

    Thanks for the inspiration, @vrijvlinder

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • @hgtonight said:
    Thanks for the inspiration, vrijvlinder

    @hgtonight

    you've found your muse.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited April 2013

    and I quote from the dictionary...

    Muse

    • (Myth & Legend / Classical Myth & Legend) Greek myth any of nine ten sister goddesses, each of whom was regarded as the protectress of a different art or science. Daughters of Zeus and Mnemosyne, the nine ten are Calliope, Clio, Erato, Euterpe, Melpomene, Polyhymnia, Terpsichore, Thalia, and Urania and @vrijvlinder

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited April 2013

    back to topic :)

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yea and they all end up dead lol specially Urania once they told her eating uranium laced chalk was unhealthy :)

    however putting me up there at the level of greek goddesses is very flattering nonetheless.

    @peregrine = Spartacus !

  • Thanks to both @vrijvlinder and @hgtonight for your help!

Sign In or Register to comment.