2
#1
Back To Top Button
Posted March 23rd 2014, 9:43pm
These days it is commonplace for sites to have a "Back To Top" button that appears when scrolling, disappears when at the top of the page, and animates a smooth scroll to the top of the page when clicked. The problem with most of these buttons is that they require the loading of the (HUGE) jQuery UI package and a 'Back To Top' image.

This modification requires jQuery! It is compatible with all versions of jQuery.

If you are already loading jQuery, here is a simple "Back To Top" button that requires no additional libraries or images. It uses the built-in jQuery .animate() function to provide the smooth scrolling, and it uses a "Dingbat" character for the button.

Installation is simple, though you will need to adjust the CSS to your installation (see below). Add the following to any CSS file you use which is loaded on every page:

#tt_box {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
#tt_wrap {
position: relative;
width: 990px;
margin: 0 auto;
}
#tt_button {
cursor: pointer;
position: absolute;
right: 5px;
bottom: 5px;
width: 40px;
height: 40px;
line-height: 40px;
background: #777;
background-color: rgba(0,0,0,0.4);
color: #fff;
font-size: 24px;
text-align: center;
z-index: 99999;
}

In the #tt_wrap property, make sure to adjust the width, margin, and (if present) padding rules to match those of your site's page wrapper property. Most phpBB themes define the page wrapper as #wrap, and it can usually be found in the theme's common.css file. Most WordPress themes define the page wrapper as either #page or #wrapper, and it can usually be found in the theme's style.css file. These files are also the best place to add the above CSS.

You should also adjust the background color and color rules to match those in your theme. The above CSS will look good on a light background. For a dark background, transposing the background color and color values would be a good starting point. (In case you're interested, the reason two background properties are defined is because most versions of Internet Explorer do not support translucent backgrounds, and a traditional background rule must be added.)

At the bottom of each page, just above </body> tag, add the following:

<div id="tt_box">
<div id="tt_wrap">
<span id="tt_button" style="display:none">&#x25b2;</span>
</div>
</div>

<script type="text/javascript">
document.getElementById('tt_button').onclick = function() {
jQuery('html,body').animate({scrollTop: 0}, 750);
};

var top_flag = true;

jQuery(window).scroll(function() {
var spos = $(this).scrollTop();
if (spos > 50 && top_flag) {
jQuery('#tt_button').fadeIn(500);
top_flag = false;
}
else if (spos <= 50 && !top_flag) {
jQuery('#tt_button').fadeOut(250);
top_flag = true;
}
});
</script>

In phpBB, you should add this code in the theme's overall_footer.html file. In WordPress, it should be added in the theme's footer.php file. There are some minor adjustments which can be made in the above script, such as when the button appears and disappears, and how long its fading effects last. Please feel free to ask for additional information about these adjustments.

Congratulations! You now have a "Back To Top" button just like all those other sites...except yours doesn't cause page load issues!

In order for everyone to see what this button looks like and how it works, I have added this modification to both this board and the BridgeDD Support board. Since the BridgeDD Support board loads the Genericons font, it is using a character from that font for its button.
φ
Posts: 1600
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357

Who is online

Users browsing this forum: No registered users and 0 guests