CreativeDesignz
Web Design and Coding
|
First
Go to the Admin CP => Display => Pictures and Colors > Colors > CSS Stylesheet
And put this code
- Code:
#backtotop {
bottom: 50px;
color: #FFFFFF;
cursor: pointer;
display: none;
font-size: 14px;
opacity: 0.6;
padding: 8px;
position: fixed;
text-align: center;
z-index: 1000;
right: 30px;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
}
#backtotop:hover {
opacity : 0.9;
}
You can change background-color or even add a image.
You can put this code in the templates or homepage message
- Code:
<div id="backtotop">Back to Top</div>
If you use PunBB or PhpBB2 you can put the HTML code in the Templates overall_footer_end.
The completed Code:
- Code:
<style>
#backtotop {
bottom: 50px;
color: #FFFFFF;
cursor: pointer;
display: none;
font-size: 14px;
opacity: 0.6;
padding: 8px;
position: fixed;
text-align: center;
z-index: 1000;
right: 30px;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
}
#backtotop:hover {
opacity : 0.9;
}
</style><div id="backtotop">Back to Top</div>
Second
Go to the Administration Panel => Modules => HTML & JAVASCRIPT => Javascript codes management
Create a new javascript and paste this code:
- Code:
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
}); Check list on all page
|
Notice : This tutorial is copyrighted by CreativeDesignz. You may not publish it on anywhere without written permission from the administrators. |
Last edited by Verrell123 on Wed Jun 13, 2012 10:35 am; edited 3 times in total
Back to Top Thu May 10, 2012 7:39 am
Posts : 103 
Coins : 4661 
Reputations : 25 
