Back to Top Button for SMF

Mick in Tutorials on Mar 09, 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>




Tagged with: go to top javascript smf button 


Mick

Mick G

idesignsmf.com

    

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 and has a weakness for Tacos and Pizza.


19 Comments

well somethings wrong with this code your demo button don't work fyi.
1

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

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

LOL well ya I agree with you on IE
5

it pops to bottom of the div like so, See image
6

How about now?
7

nope same, let me check on my laptop it has FF 19.0 on it 19.2 has not work well for me.
8

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

works in chrome but not FF 19.0.
10

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




Latest Discussions

Join the conversation



  Documentation & Tutorials. We have a great selection of tutorials to help you make the most of your theme.