Back to Top Button for SMF

Written by Mick in Tutorials on 09 Mar 2013



Implement a feature which you may have seen on websites with lots of page content. This button appears when the browser window is scrolled beyond a certain point and will allow your users to easily navigate back to top?.

Demo: Scroll down and look for the arrow on the bottom right.


The CSS:

.go-top  {
position: fixed;
bottom: 2em;
right: 2em;
text-decoration: none;
color: #fff;
background: #666;
font-size: 14px;
padding: 1em;
display: none;
}
.go-top:hover {
background: #333;
}


The Markup:
In Index.template.php find:
<div id="footer">

...and add before:
<a href="javascript:void(0)" class="go-top">Top</a>

The Javascript:
In Index.template.php find:

</body></html>';
}

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..


...and add before:

<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".go-top").fadeIn(200);
} else {
$(".go-top").fadeOut(200);
}
});

// Animate the scroll to top
$(".go-top").click(function(event) {
event.preventDefault();

$("html, body").animate({scrollTop: 0}, 300);
})
});
</script>


Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    

19 Comments

well somethings wrong with this code your demo button don't work fyi.
#1
Quote from: michael.sears.351 on 10 Mar 2013
well somethings wrong with this code your demo button don't work fyi.
Scroll down. bottom right.
#2
ya it don't work in firefox or in IE 10.
#3
Quote from: michael.sears.351 on 10 Mar 2013
ya it don't work in firefox or in IE 10.

Tested it on Firefox, Safari & Chrome. Working well.

IE? Meh, Internet Explorer should vanish off the earth.
#4
it pops to bottom of the div like so, See image
#6
nope same, let me check on my laptop it has FF 19.0 on it 19.2 has not work well for me.
#8
Quote from: michael.sears.351 on 10 Mar 2013
nope same, let me check on my laptop it has FF 19.0 on it 19.2 has not work well for me.

I only added a noConflict line to the js code since i thought it was clashing with our own 'go up' button.
#9
ok,  it has be conflicted with your back to top, I add this to one my old themes and it works fine. 
#11
I changed the code a bit. Some IE's dont recognize rgba colors. Changed them to hex instead.

...and this is the no conflict i added to the demo.
                          //avoid conflict with other script
                          $z=jQuery.noConflict();
                          $z(document).ready(function($) {



    <!-- JavaScript -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
                          //avoid conflict with other script
                          $z=jQuery.noConflict();
                          $z(document).ready(function($) {
            // Show or hide the sticky footer button
            $(window).scroll(function() {
                if ($(this).scrollTop() > 200) {
                    $(".go-top").fadeIn(200);
                } else {
                    $(".go-top").fadeOut(200);
                }
            });
           
            // Animate the scroll to top
            $(".go-top").click(function(event) {
                event.preventDefault();
               
                $("html, body").animate({scrollTop: 0}, 300);
            })
        });
    </script>
#12
demo doesnt work in opera here. (12.50 internal build)
#13
Thanks Mick this worked a treat on my theme ty.

:happy:
#14

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.