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:

Code Select Expand


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

Code Select Expand

<div id="footer">

...and add before:

Code Select Expand

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

The Javascript:
In Index.template.php find:

Code Select Expand


</body></html>';
}

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


...and add before:

Code Select Expand


<!-- 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>


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

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

Scroll down. bottom right.

ya it don't work in firefox or in IE 10.

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.

LOL well ya I agree with you on IE

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

How about now?

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

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.

works in chrome but not FF 19.0.

ok,  it has be conflicted with your back to top, I add this to one my old themes and it works fine. 

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.

Code Select Expand

                          //avoid conflict with other script
                          $z=jQuery.noConflict();
                          $z(document).ready(function($) {

Code Select Expand

    <!-- 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>

demo doesnt work in opera here. (12.50 internal build)

Thanks Mick this worked a treat on my theme ty.

:happy: