FIXED Top of Page Button

by Sparkks - 30-06-2015, 10:41 PM
Closed Account
Posts:
67
Joined:
Jun 2015
Likes:
10
Credits:
373
Reputation:
2
1 Year of Service
#1
OP
Posted: 30-06-2015, 10:41 PM (This post was last modified: 30-06-2015, 10:52 PM by Sparkks. Edit Reason: edit title )
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:
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>
...and at the end before two close </div> tags:
Code:
<div id='backtop'>
   <a class='go-top' href='#top' title='Back to Top'><img src="{$theme['imgdir']}/top.png" /></a>
</div>
Save your footer template.

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:
[Image: attachment.php?aid=27311]

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>
We are!
Posts:
1,045
Joined:
Jan 2015
Likes:
107
Credits:
1,818
Reputation:
25
2 Years of Service
#2
Posted: 30-06-2015, 10:46 PM
This would be something interesting. Nice suggestion!
广交友,无深交
Harmony
Posts:
458
Joined:
May 2015
Likes:
31
Credits:
465
Reputation:
15
1 Year of Service
#3
Posted: 30-06-2015, 10:49 PM
I'd love to have this added, would be super useful.
SSC GTX 970 | I5-6600 3.3GHz | B350 Pro Gaming D3 Mobo | 16GBs DDR3 PNY XLR8 RAM | 240GB SanDisk SSD | 1TB Hybrid Hard Drive | NZXT Phantom |
Closed Account
Posts:
1,383
Joined:
Jan 2015
Likes:
123
Credits:
1,212
Reputation:
30
2 Years of Service
#4
Posted: 30-06-2015, 11:25 PM
I got a button in my Keyboard to do it, but oh well, I don't really care if it's added.
لا إله إلا الله‎
Posts:
6,312
Joined:
Jan 2015
Likes:
286
Credits:
1,100
Reputation:
149
2 Years of Service
#5
Posted: 30-06-2015, 11:29 PM
it would be great if his is added :D .
tbh. Scrolling to top is not a big pain but umm
| Monopoly- Best forever .. | Addicted | Senpai | Nyan | Sensei | H | fdigl |

Novice
Posts:
30
Joined:
Jun 2015
Likes:
0
Credits:
6
Reputation:
0
1 Year of Service
#6
Posted: 30-06-2015, 11:34 PM
Really helpful .thanks
Closed Account
Posts:
67
Joined:
Jun 2015
Likes:
10
Credits:
373
Reputation:
2
1 Year of Service
#7
OP
Posted: 30-06-2015, 11:41 PM
(30-06-2015, 11:29 PM)Believer Wrote: it would be great if his is added :D .
tbh. Scrolling to top is not a big pain but umm

I'm on a Surface pro 3 with their shitty keyboard... it's a pain for me. 
لا إله إلا الله‎
Posts:
6,312
Joined:
Jan 2015
Likes:
286
Credits:
1,100
Reputation:
149
2 Years of Service
#8
Posted: 30-06-2015, 11:41 PM
(30-06-2015, 11:41 PM)Sparkks Wrote:
(30-06-2015, 11:29 PM)Believer Wrote: it would be great if his is added :D .
tbh. Scrolling to top is not a big pain but umm

I'm on a Surface pro 3 with their shitty keyboard... it's a pain for me. 

i know that feeling for sure. When you get laptop or something like that :3
| Monopoly- Best forever .. | Addicted | Senpai | Nyan | Sensei | H | fdigl |

@Believer rocks
Prime
Posts:
1,237
Joined:
May 2015
Likes:
38
Credits:
901
Reputation:
32
1 Year of Service
#9
Posted: 01-07-2015, 12:27 AM
This is really easy lol. But thanks for sharing :3
Closed Account
Posts:
67
Joined:
Jun 2015
Likes:
10
Credits:
373
Reputation:
2
1 Year of Service
#10
OP
Posted: 01-07-2015, 12:27 AM (This post was last modified: 01-07-2015, 12:28 AM by Sparkks.)
(01-07-2015, 12:27 AM)Kill Wrote: This is really easy lol. But thanks for sharing :3

I know it's easy, I just wanted to make it easier. 

(30-06-2015, 10:49 PM)Day Wrote: I'd love to have this added, would be super useful.

[Image: Shia-Labeouf-motivation-just-do-it.gif?t=1433428170]
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)