Suggestions
FIXED Top of Page Button
Submitted by Sparkks, 30-06-2015, 11:41 PM, Thread ID: 5388
Thread Closed
I'm always using the "go to top" button on the websites that I use, and I believe it would be great for this one, especially because we allow multiple nested quotes.
IMPORTANT: If you do not want to go through this entire tutorial, you can install a script called EAGER which is only a JavaScript file include install. It will add a 'scroll-to-top' button automatically. It has a couple other apps you can install with one-click! I really love Eager.
I'll add a tutorial so you don't need to do research if you'd like to implement it.
You can find this tutorial here.
Step 1:
Open your footer template and add the following code at the very beginning:
...and at the end before two close </div> tags:
Save your footer template.
Step 2:
Open global.css and add at the end:
Step 3:
Upload this up button in your theme image directory:
![[Image: attachment.php?aid=27311]](https://nulledbb.com/c/f1c4b1c724f8234d8547cdbcbb1b0982c95e6ed1/687474703a2f2f636f6d6d756e6974792e6d7962622e636f6d2f6174746163686d656e742e7068703f6169643d3237333131/attachment.php?aid=27311)
Remember to include jQ library in MyBB if it is already not. In headerinclude:
IMPORTANT: If you do not want to go through this entire tutorial, you can install a script called EAGER which is only a JavaScript file include install. It will add a 'scroll-to-top' button automatically. It has a couple other apps you can install with one-click! I really love Eager.
I'll add a tutorial so you don't need to do research if you'd like to implement it.
You can find this tutorial here.
Step 1:
Open your footer template and add the following code at the very beginning:
Code:
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($) {
$("#backtop").hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#backtop').fadeIn(200);
} else {
$('#backtop').fadeOut(200);
}
});
$('.go-top').click(function () {
$('html,body').animate({
scrollTop: 0
}, 1000);
return false;
});
});
</script>Code:
<div id='backtop'>
<a class='go-top' href='#top' title='Back to Top'><img src="{$theme['imgdir']}/top.png" /></a>
</div>Step 2:
Open global.css and add at the end:
Code:
#backtop {
position: fixed;
bottom: 50px;
right: 10px;
margin: 0;
padding: 0;
width: 36px;
height: 36px;
z-index: 100;
}Step 3:
Upload this up button in your theme image directory:
Remember to include jQ library in MyBB if it is already not. In headerinclude:
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>RE: FIXED Top of Page Button
30-06-2015, 11:46 PM
#2 RE: FIXED Top of Page Button
30-06-2015, 11:49 PM
#3 UID: 799 I'm an oldfag.
RE: FIXED Top of Page Button
01-07-2015, 12:25 AM
#4 RE: FIXED Top of Page Button
01-07-2015, 12:34 AM
#6 RE: FIXED Top of Page Button
RE: FIXED Top of Page Button
01-07-2015, 01:27 AM
#9 ![[Image: Shia-Labeouf-motivation-just-do-it.gif?t=1433428170]](https://nulledbb.com/c/ff635d9833bd8de48f2bd6d58539408580e2db76/687474703a2f2f693235382e70686f746f6275636b65742e636f6d2f616c62756d732f68683235332f6a696d6966756e67757a7a2f536869612d4c6162656f75662d6d6f7469766174696f6e2d6a7573742d646f2d69742e6769663f743d31343333343238313730/Shia-Labeouf-motivation-just-do-it.gif?t=1433428170)
Users browsing this thread: 2 Guest(s)