[How To] Add a Scroll Back To Top Button

Hi,

if you want to add a Scroll Back To Top Button in Maian Events (very useful if you're watching it in your mobile phone), you have to edit this two files:

In content/_theme_default/header.tpl.php find:

<body>

    <?php
    // Shows only on extra small screens
    ?>

And add just after the <body> tag:

<body>
    <script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
            if($(this).scrollTop() > 100){
                $('#scroll').fadeIn();
            }else{
                $('#scroll').fadeOut();
            }
        });
        $('#scroll').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });
    });
    </script>
<a href="javascript:void(0);" id="scroll" title="Go Up" style="display: none;">Up!<span></span></a>
    <?php
    // Shows only on extra small screens
    ?>


In content/_theme_default/css/msw.css add at the end of the file:

#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    z-index: 999;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#scroll:hover {
    background-color:#7851af;
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
#scroll:visited {
    background-color:#7851af;
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}

And that's it. Now you don't have to "waste" your finger in your mobile screen to return to the top. wink