FIXED Top of Page Button

by Sparkks - 30-06-2015, 11:41 PM
Closed Account
Posts:
67
Joined:
Jun 2015
Likes:
13
Credits:
429
Reputation:
2
2 Years of Service
#1
OP
Posted: 30-06-2015, 11:41 PM (This post was last modified: 30-06-2015, 11: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,044
Joined:
Jan 2015
Likes:
108
Credits:
1,906
Reputation:
25
2 Years of Service
#2
Posted: 30-06-2015, 11:46 PM
This would be something interesting. Nice suggestion!
广交友,无深交
Harmony
Posts:
468
Joined:
May 2015
Likes:
33
Credits:
370
Reputation:
23
2 Years of Service
#3
Posted: 30-06-2015, 11:49 PM
I'd love to have this added, would be super useful.
UID: 799 I'm an oldfag.
Closed Account
Posts:
1,383
Joined:
Jan 2015
Likes:
124
Credits:
1,308
Reputation:
30
2 Years of Service
#4
Posted: 01-07-2015, 12:25 AM
I got a button in my Keyboard to do it, but oh well, I don't really care if it's added.
لا إله إلا الله‎
Posts:
6,330
Joined:
Jan 2015
Likes:
300
Credits:
322
Reputation:
162
2 Years of Service
#5
Posted: 01-07-2015, 12:29 AM
it would be great if his is added :D .
tbh. Scrolling to top is not a big pain but umm
| Monopoly- Best forever .. | v4hl - ;) | Addicted | Senpai | Nyan | Sensei | H | fdigl |
[Image: gZD4Fba.png]

Novice
Posts:
30
Joined:
Jun 2015
Likes:
0
Credits:
6
Reputation:
0
2 Years of Service
#6
Posted: 01-07-2015, 12:34 AM
Really helpful .thanks
Closed Account
Posts:
67
Joined:
Jun 2015
Likes:
13
Credits:
429
Reputation:
2
2 Years of Service
#7
OP
Posted: 01-07-2015, 12:41 AM
(01-07-2015, 12:29 AM)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,330
Joined:
Jan 2015
Likes:
300
Credits:
322
Reputation:
162
2 Years of Service
#8
Posted: 01-07-2015, 12:41 AM
(01-07-2015, 12:41 AM)Sparkks Wrote:
(01-07-2015, 12:29 AM)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 .. | v4hl - ;) | Addicted | Senpai | Nyan | Sensei | H | fdigl |
[Image: gZD4Fba.png]

@Believer rocks
Paradigm
Posts:
1,283
Joined:
May 2015
Likes:
43
Credits:
-1,050
Reputation:
45
2 Years of Service
#9
Posted: 01-07-2015, 01:27 AM
This is really easy lol. But thanks for sharing :3
Closed Account
Posts:
67
Joined:
Jun 2015
Likes:
13
Credits:
429
Reputation:
2
2 Years of Service
#10
OP
Posted: 01-07-2015, 01:27 AM (This post was last modified: 01-07-2015, 01:28 AM by Sparkks.)
(01-07-2015, 01: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, 11: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)